<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<center>
<div id="app">
<p>
姓名 <input type="text" v-model="datas.name">
性别 <input type="text" v-model="datas.sex">
年龄 <input type="text" v-model="datas.age">
<button @click="insert">增加</button>
</p>
<table>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="(user,index) in users">
<td>{{ index + 1}}</td>
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td>{{user.age}}</td>
<td><button @click="remove(index)">删除</button></td>
</tr>
</table>
</div>
</center>
</body>
</html>
<script>
var vm = new Vue({
//指定作用域
el:'#app',
//数据绑定
data:{
datas:{ 'name' : '', 'sex' : '' ,'age' : ''},//新增数据
users:[
{ 'name' : 'zhangsan', 'sex' : 'man' ,'age' : '12'},
{ 'name' : 'lisi','sex':'man','age':'16'},
{ 'name' : 'wangwu', 'sex' : 'woman' , 'age' : '18'}
]
},
//方法
methods:{
insert:function() {
this.users.push(this.datas);//将新增数据放到users数组中
},
remove:function(index){
this.users.splice(index,1);//通过索引删除数据
}
}
})
</script>
知识点 :此次用到了数据地双向绑定来实现数据地新增,v-for 循环。
splice(index,num,item1,item2,...,itemX) 方法向/从数组中添加/删除项目,然后返回被删除的项目。
注:index--规定添加/删除项目的位置
num--要删除的项目数量
item--向数组添加的新项目
splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。