先看效果图吧！！！！
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>
