vue
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
	<div class="container" id="itany">
		<h2 class="text-center">添加用户</h2>
		<form class="form-horizontal">
			<div class="form-group">
				<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓名</label>
				<div class="col-sm-6">
					<input class="form-control" type="text" id="name" v-model="user.name" placeholder="请输入姓名">
				</div>
			</div>
			<div class="form-group">
				<label for="age" class="control-label col-sm-2 col-sm-offset-2">年龄</label>
				<div class="col-sm-6">
					<input type="text" v-model="user.age" class="form-control" placeholder="请输入年龄">
				</div>
			</div>
			<div class="form-group">
				<label for="email" class="control-label col-sm-2 col-sm-offset-2">Email</label>
				<div class="col-sm-6">
					<input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入Email">
				</div>
			</div>
			<div class="form-group text-center">
				<input type="button" value="添加" class="btn btn-primary" v-on:click="addUser">
				<input type="reset" value="重置" class="btn btn-primary">
			</div>
		</form>

		<hr>

		<table class="table table-bordered table-hover">
			<caption class="h3 text-center text-info">用户列表</caption>
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>邮箱</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(user, index) in users" class="text-center">
					<td>{{index+1}}</td>
					<td>{{user.name}}</td>
					<td>{{user.age}}</td>
					<td>{{user.email}}</td>
					<td>
						<button class="btn btn-danger" data-toggle="modal" data-target="#del" v-on:click="currentKey=index;">删除</button>
					</td>
				</tr>
				<tr class="text-center">
					<td colspan="4" style="border:none"></td>
					<td>
						<button class="btn btn-danger" v-on:click="currentKey=-1;" data-toggle="modal" data-target="#del">删除所有</button>
					</td>
				</tr>
			</tbody>
		</table>

		<!-- 模态框,弹出框 -->
		<div class="modal" id="del">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
						<h4 class="modal-title text-center" v-show="currentKey !== -1">确认要删除用户：{{users[currentKey]?users[currentKey].name:''}} 吗？</h4>
						<h4 class="modal-title text-center" v-show="currentKey === -1">确认要删除全部用户吗？</h4>
					</div>
					<div class="modal-body text-center">
						<button class="btn btn-primary" data-dismiss="modal">取消</button>
						<button class="btn btn-primary" data-dismiss="modal" v-on:click="deleUser">确认</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	let vm = new Vue({
		el: '#itany',
		data : {
			users : [
				{name:'tom',age:24,email:'tome@gmail.com'},
				{name:'jack',age:30,email:'jack@gmail.com'}
			],
			user: {},
			currentKey: -1
		},
		methods : {
			addUser(){
				if (this.user.age && this.user.name && this.user.email) {
					this.users.push(this.user);
					this.user = {};
				}
			},
			deleUser(){
				if (this.currentKey == -1) {
						this.users = {};
				} else {
					this.users.splice(this.currentKey, 1);
				}
			}
		}
	});
</script>
</html>