使用VueJs模拟表单数据的添加、回填修改

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Vue课后题</title><script type="text/javascript" src="js/vue.js"></script><style...

小小志秩

5377人浏览 · 2019-04-07 08:44:34

小小志秩 · 2019-04-07 08:44:34 发布

<!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^