小测验

最新推荐文章于 2021-12-16 17:28:00 发布

weixin_45838872

最新推荐文章于 2021-12-16 17:28:00 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/weixin_45838872/article/details/102966742

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
	</head>
	<body>
		<div class="container">
			<div id="app">
				<div>
					id:<input type="text" v-model="id">
					名字:<input type="text" v-model="name">
					职位:<input type="text" v-model="position">
					<input class="btn btn-primary" type="button" value="添加" @click="add">
				</div>
				<table class="table table-bordered table-striped table-hover">
					<thead>
						<tr>
							<th><input type="checkbox"></th>
							<th>ID</th>
							<th>名字</th>
							<th>职位</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="person in people" v-bind:key="person.id">
							<td><input type="checkbox"></td>
							<td>{{person.id}}</td>
							<td>{{person.name}}</td>
							<td>{{person.position}}</td>
							<td><button class="btn btn-danger" @click="del(person.id)">删除</button></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<script src="js/vue.js"></script>
		<script>
			var vm = new Vue({
						el: '#app',
						data: {
							id: null,
							name: null,
							people: [{
									id: 1,
									name: '张三',
									position: '总监'
								},
								{
									id: 2,
									name: '李四',
									position: '低级职员'
								},
								{
									id: 3,
									name: '王五',
									position: '高级职员'
								},
							]

						},
						methods: {
							add() {
								var person = {
									id: this.id,
									name: this.name,
									position: this.position,
								};
								this.people.push(person);
							},
							del(id) {

								this.people.some((data, a) => {
									if (id == data.id) {
										this.people.splice(a, 1);
										return true;
									}
								})
							}
						}
						});
		</script>
	</body>
</html>