<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<body>
<div id="app">
<input type="text" v-model="iptuser">
<input type="text" v-model="iptcontent">
<button @click="add">提交</button>
<ul>
<li v-show="list.length===0">暂无数据</li>
<li v-for="(item,index) of list" :key="item.id">
<span>{{item.name}},</span>
<span>{{item.content}}</span>---{{index}}
<a href="javascript:" @click="del">删除</a>
<a href="javascript:" @click="check(index)">修改</a>
</li>
</ul>
<button @click="clear">清空</button>
</div>
<script>
let vm=new Vue({
el:'#app',
data:{
title:'文档',
list:[{id:1,name:'huahua',content:'来吃饭吗'},{id:2,name:'xioaying',content:'走起'}],
iptuser:'',
iptcontent:'',
},
methods:{
add(){
this.list.push({
id:this.list.length+1,
name:this.iptuser,
content:this.iptcontent
})
this.iptcontent=this.iptcontent='';
},
del(index){
this.list.splice(index,1)
},
check(index){
console.log(this.list[index])
console.log(this.iptuser)
this.list[index].name=this.iptuser;
this.list[index].content=this.iptcontent;
},
clear(){
this.list=[]
}
}
})
</script>
</body>原文：https://www.cnblogs.com/sansancn/p/11042659.html