vue实现简单评论功能
先看效果图吧！！！！
1.添加一条信息
接下来让我们看代码吧！
<style type="text/css"> *{ padding: 0;margin: 0; } .box{ margin: 30px; width: 500px; height: 500px; display: flex; } p{ margin-top: 10px; } a{ text-decoration: none; float: right; } ul{ margin-left: 30px; } li{ width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 50px; line-height: 50px; border:1px solid #CCCCCC; padding: 0 20px; list-style: none; } .speak{ margin-left: 30px; } </style> </head> <body> //html <div class="box"> <div class="user"> <p>用户名</p> <!-- @keyup监听键盘事件 --> <!-- @keyup.enter回车键获取值 --> <p><input v-model.trim="user" @keyup.enter="addItem()" type="text" placeholder="用户名" /></p> <p>吐槽内容</p> <p><textarea v-model="comm" @keyup.enter="addItem()" placeholder="吐槽内容"></textarea></p> <p><button type="button" @click="btn">提交</button></p> </div> <div class="speak"> <p>吐槽回复：</p> <ul v-for="(item,index) in list" :key="item.name"> <li>{{item.name}}说：{{item.txt}}<a href="#" @click="delItem(item)">删除</a></li> </ul> </div> </div> //js <script type="text/javascript"> new Vue({ el:".box", data(){ return{ // 评论用户以及内容的数据 // name评论的用户名字 txt评论的内容 list:[ {name:"tom",txt:"笑不活了"}, {name:"jarry",txt:"买了吧"}, {name:"小爱同学",txt:"可恶，有被装到"}, {name:"小一",txt:"鹅鹅鹅，曲项向天歌"} ], user:"",//输入的名字存入 comm:"",//评论存入 } }, methods:{ // 点击按钮提交 btn(){ var usercom={ name:this.user, txt:this.comm } this.list.unshift(usercom) this.user=""; this.comm=""; }, // 用户名方法事件 addItem(){ // 创建用户名 var item={ // 用户名字 name:this.user, // 用户评论 txt:this.comm, }; // 在list前面添加 item unshift在前面添加 this.list.unshift(item) // 清空user this.user=""; // 清空评论 this.comm=""; }, //删除点击事件 获取元素 delItem(item){ // 查找元素item在list里的下标 var ind=this.list.findIndex(value=>value.name==item.name); //删除 // splice 功能（从第几个元素，删除几个 添加内容） this.list.splice(ind,1); } } }) </script>