這篇文章主要為大家展示了“Vue如何實現發表評論功能”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue如何實現發表評論功能”這篇文章吧。
具體內容如下
1、這是我在學習中的實例，有些的不足的地方，還望各位大佬指點，感謝哦~
2、發表評論的效果圖
點擊“發表”之后的效果（每條評論之后點擊“刪除”可以刪掉這一整條評論~）
3、完整代碼展示（我html結構寫的比較亂，這里提醒大家一下，沒有定義類的div是可以刪掉的，我是因為方便寫樣式所以多加了div）
還是要提醒一下，不要忘記引入vue.js，目錄記得根據自己存放的位置改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js"></script>
<style type="text/css">
*{
margin: 0;padding: 0;
box-sizing: border-box;
}
#app{
width: 700px;
height: 650px;
margin: auto;
border: 1px solid #ccc;
}
#app h2{
width: 700px;
font-weight: 400;
line-height: 100px;
padding-left: 20px;
background-color: #cccccc;
margin-bottom: 20px;
}
#app>div{
padding: 0 20px;
}
#app>div>input{
width: 200px;
height: 30px;
padding: 0 5px;
margin: 5px 0;
}
#app>div>textarea{
padding: 5px;
margin-top: 5px;
}
.cont div{
height: 50px;
border: 1px solid #acacac;
border-radius: 5px;
padding: 0 10px;
}
.cont div span{
padding: 0 5px;
line-height: 50px;
}
.cont p{
display: inline-block;
}
.cont div p:nth-of-type(1){
color: #550000;
}
.cont div p:nth-of-type(2){
color: #595959;
}
.cont .del{
float: right;
line-height: 50px;
color: #003366;
cursor: pointer;
}
.cont .del:hover{
color: #550000;
}
.send{
width: 80px;
height: 30px;
margin-top: 10px;
}
hr{
border: 1px solid #bababa;
margin: 15px 0;
}
h4{
font-weight: 400;
color: #333;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="app">
<h2>歡迎來到吐槽大廳</h2>
<div>
<label>用戶名：</label><br>
<!-- .trim去除內容中的空格 -->
<!-- v-model綁定表單的(uname)值 -->
<input type="text" placeholder="用戶名" v-model.trim="uname" /><br>
<label>吐槽內容：</label><br>
<textarea rows="2" cols="23" placeholder="吐槽內容" v-model.trim="tarea"></textarea><br>
<!-- @click="",設置點擊事件 -->
<button class="send" @click="sendCont()">發表</button>
<hr>
<h4>吐槽回復：</h4>
<!-- 遍歷list數據 -->
<div class="cont" v-for="val in list" :key="val.name">
<div>
<p>{{val.name}}</p><span>說:</span>
<p>{{val.item}}</p>
<p class="del" @click="delCont(val)">刪除</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",//指定模板
data:{
list:[
{"name":"beibei","item":"媽媽,我想吃烤紅薯"},
{"name":"dian","item":"吃,吃大塊的"},
],
uname:"",
tarea:"",
},
methods:{
// "發表"按鈕的點擊事件
sendCont(){
// 創建一項清單
var item = {name:this.uname,item:this.tarea};
// 在list的前面添加item
this.list.unshift(item);
// 用戶框，內容框清空
this.uname="";
this.tarea="";
},
// 評論最后的"刪除"事件
delCont(val){
alert("確定刪除？");
// 查找val在list下標
// value遍歷的元素 當value的item/name值等于val的item/name值
var ind = this.list.findIndex(value=>value.item===val.item);
// 刪除list第ind個
this.list.splice(ind,1);
}
}
})
</script>
</body>
</html>以上是“Vue如何實現發表評論功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
