版权声明：本文为博主原创文章，未经博主允许不得转载。转载注明出处。 https://blog.csdn.net/zuoyiran520081/article/details/80264646
实现类似的如图功能：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改实现添加联系人操作</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(list,index) in lists">
<ul>
<li>
<span>名字</span>
<input type="text" v-model="list.name" style="width:100px">
</li>
<li>
<span>电话</span>
<input type="text" v-model="list.tel" style="width:100px">
</li>
<li>
<button v-on:click="del(index)">删除联系人</button>
</li>
</ul>
</div>
<button v-on:click="add">添加联系人</button>
</div>
</body>
<script>
var vm = new Vue({
el : "#app",
data:{
tables : [],
lists:[{
name:"wang",
tel:"qwe"
}]
},
methods:{
add:function(){
let cope = {
name:"",
tel:""
}
this.lists.push(cope);
console.log(this.lists)
},
del:function(index){
this.lists.splice(index,1);
console.log(this.lists)
}
}
});
</script>
</html>