此案例想要的就是我们在输入框中输入文本，可以显示或者可以删除评论。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
<style>
*{ padding:0; margin:0;outline: none; box-sizing: border-box;}
.out{ width:550px; min-height: 200px; margin:100px auto; border:1px solid #eee; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.1); padding:30px;}
.search{display: flex; padding-bottom:30px;}
.search .ipt{ height: 36px; border:none; background: #eee; border-radius: 3px; padding:0 10px; font-size:16px; color:#666; width:80%;letter-spacing: 0.1em;}
.search .btn{ height: 36px; width:20%; border:none; background: #4FC08D; color:#fff; font-size:16px; cursor: pointer;}
.out .row{ border-bottom:1px solid #eee;border-top:1px solid #eee; height: 40px; display: flex; align-items: center;font-size:16px; justify-content: space-between;margin-top:-1px;color:#333;}
.out .row .close{ font-size:22px; font-family: "宋体"; color:#FF976A; display: none; cursor: pointer;}
.out .row:hover .close{ display: block;}
.out .num{ padding-top:20px; color:#555; text-align: center;}
.out .num b{ display: inline-block; padding:0 3px;}
.out .comment{ font-size:16px; color:#999; text-align: center;}
</style>
</head>
<body>
<div id="app">
<div class="out">
<div class="search">
<input type="text" class="ipt" v-model="iptVal" @keyup.enter="onSubmit">
<input type="button" class="btn" value="评论" @click="onSubmit">
</div>
<div class="row" v-for="(item,idx) in listArr">
{{item}}
<div class="close" @click="onClose(idx)">×</div>
</div>
<div class="num" v-if="listArr.length">共<b>{{listArr.length}}</b>条评论</div>
<div class="comment" v-else>暂无评论</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
iptVal:"",
listArr:[]
},
methods: {
onSubmit(){
// 在后面追加数据
this.listArr.push(this.iptVal)
// 在前面追加数据
// this.listArr.unshift(this.iptVal)
this.iptVal=""
},
onClose(index){
this.listArr.splice(index,1)
}
}
});
</script>
</body>
</html>
?我们在进行输入评论时，通常大家会输入文本后进行回车发布评论，或者使用点击输入框后的搜索按钮来进行发布。?
当评论后，我们想追加评论，可以在当前评论前追加或在后追加：
当我们想删除评论，我们要通过点击来关闭此评论，使用js数组对象中的splice（）的删除属性。?
传递索引值。?
这样就可以实现删除评论。