标签:name VueJs age per 表单 回填 user null id
<!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>
标签:name,VueJs,age,per,表单,回填,user,null,id 来源: https://blog.csdn.net/z2014ypd/article/details/89064993
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。