<!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" />
姓名：<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]
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>
使用VueJs模拟表单数据的添加、回填修改
猜你喜欢
转载自blog.csdn.net/z2014ypd/article/details/89064993
今日推荐
周排行