-->
<td><button @click="del(index)" >删除</button></td>
</tr>
<tr >
<td><button @click="clear()" >清空</button></td>
</tr>
</table>
<h3>添加</h3>
姓名:<input type="text" v-model="userName"><br>
年龄:<input type="text" v-model="userAge"><br>
<button @click="add">添加</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
arr: [{
userId: 1,
userName: '张三',
userAge: 20
}, {
userId: 2,
userName: '李四',
userAge: 21
}, {
userId: 3,
userName: '王五',
userAge: 22
}],
userName:'',
userAge:null,
},
methods:{
del(index){
this.arr.splice(index,1);
},
clear(){
this.arr = [];
},
add(){
//获取控件
// let userName = this.userName;
// let userAge = this.userAge;
// let userId = (this.arr.length +1);
// this.arr.push({
// userId,
// userName,
// userAge
// })
let user = {
userName:this.userName,
userAge:this.userAge,
userId:(this.arr.length + 1)
}
this.arr.push(user)
}
}
});
</script>
</body>
编号 | 姓名 | 年龄 | 操作 |
---|---|---|---|
{{obj.userId}} | {{obj.userName}} | {{obj.userAge}} |