简单vue综合实例小扩展

最新推荐文章于 2021-11-11 09:40:42 发布

追逐者6568

最新推荐文章于 2021-11-11 09:40:42 发布

阅读量356

点赞数 1

CC 4.0 BY-SA版权

分类专栏：个人 Java 文章标签： java

本文链接：https://blog.youkuaiyun.com/weixin_43902279/article/details/89085198

Java 同时被 2 个专栏收录

25 篇文章

订阅专栏

个人

23 篇文章

订阅专栏

<!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(){
						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){
						let per = this.person[index]
						this.user.name = per.name
						this.user.age = per.age
						this.user.id = index
					}
				}
			});
		</script>
	</body>
</html>