vue 動態生成input進行操作——簡單實現新增刪除聯絡人功能
阿新 • • 發佈:2018-11-01
實現類似的如圖功能:
程式碼如下:
<!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>