<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue课后题</title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
table {
border-collapse:collapse;
}
table,th, td {
border: 1px solid black;
}
table tr:nth-child(even){
background-color: peachpuff;
}
td{width: 100px; text-align: center;}
</style>
</head>
<body>
<div id="td">
<input type="hidden" v-model="user.id" />
//使用v-model进行数据双向绑定
姓名：<input type="text" v-model="user.name" />
年龄：<input type="number" v-model="user.age" />
<button @click="update">提交/更改</button>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(per,index) in person">
<td>{{index+1}}</td>
<td>{{per.name}}</td>
<td>{{per.age}}</td>
<td><button @click="remove(index)">删除</button><button @click="update2(index)">修改</button></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var App = new Vue({
el:"#td",
data:{
person:[],
user:{id:null,name:null,age:null},
},
methods:{
update(){
//根据传入的id判断操作是添加还是修改
if(this.user.id == null){
//添加新数据
this.person.push(this.user)
}else{
//数据修改
let per = this.person[this.user.id]
// this.user.name的方式能够直接获取到v-model属性的Input的值
per.name = this.user.name
per.age = this.user.age
}
//关键代码，去掉双向数据绑定之间的联系，才能添加不同对象
this.user = {id:null,name:null,age:null};
},
remove:function(index){
//删除数据
this.person.splice(index,1)
},
update2(index){
//根据v-model的特性，回填表单Input输入框
let per = this.person[index]
this.user.name = per.name
this.user.age = per.age
//将当前Person数组的索引赋值给对象作为id
this.user.id = index
}
}
});
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/75201.html
