Vue.js实现“增、删”实例

最新推荐文章于 2020-12-20 13:18:19 发布

qq_37390420

最新推荐文章于 2020-12-20 13:18:19 发布

阅读量153

点赞数

分类专栏： vue.js

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="UTF-8">
	<title>添加删除信息</title>
	<style type="text/css">
		fieldset {
			display: block;
			border: 1px solid #bcbcbc;
			width: 50%;
			margin: 0 auto;
			padding: 15px;
		}
		legend {
			font-size: 8px;
		}

		input {
			height: 20px;
		}

		select {
			width: 60px;
		}

		button {
			border: none;
			background: #009A61;
			color: white;
			width: 70px;
			border: 1px solid #009A61;
			border-radius: 4px;
			margin-left: 20px;
			line-height: 20px;
		}

		table {
			margin-top: 40px;
			width: 100%;
			text-align: center;
			border-collapse: collapse;
		}

		thead,
		td,
		tr {
			border: 1px solid #bcbcbc;
			line-height: 35px;
		}

		thead td {
			background: #009A61;
			color: white;
		}
	</style>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="view">
		<fieldset>
			<legend>人员管理</legend>
			<div class="addUser">
				姓名：<input type="text" name="name" v-model="userNew.name">
				年龄：<input type="text" name="age" v-model="userNew.age">
				性别：<select v-model="userNew.sex">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
				<button @click="createUser">提交</button>
			</div>
			<div class="delUser">
				<table>
					<thead>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>删除</td>
					</thead>
					<tbody>
						<tr v-for='(user,index) in users'>
							<td>{{user.name}}</td>
							<td>{{user.age}}</td>
							<td>{{user.sex}}</td>
							<td><button @click="deleteUser(index)">删除</button></td>
						</tr>
					</tbody>
				</table>
			</div>
		</fieldset>
	</div>
	<script>
		new Vue({
			el: "#view",
			data: {
				userNew:{
					name: '',
					age: 0,
					sex: '男'
				},
				users: [{
					name: '王临风',
					age: 20,
					sex: '男'
				}, {
					name: "王顽皮",
					age: 20,
					sex: '女'
				}, {
					name: "卢大美",
					age: 20,
					sex: '女'
				}]
			},
			methods: {
				createUser: function() {
					this.users.push(this.userNew);
					/* this.newUser = {
						name: '',
						age: 0,
						sex: 'Male'
					} */
				},
				deleteUser: function(index) {
					console.log(index);
					this.users.splice(index, 1);
				}
			}
		})
	</script>
	</body>