vue.js第三天
2018-01-19 本文已影响0人
飞奔的小白
练习：用户管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
let vm = new Vue({
el:".container",
data:{
users:[
{'name':'tom','age':'2',email:'tom@itany'},
{'name':'tom1','age':'12',email:'tom1@itany'},
{'name':'tom2','age':'22',email:'tom2@itany'}
],
user:{},
nowIndex:-1 //当前要删除项的索引
},
methods:{
addUser(){
this.users.push(this.user);
this.user={}
},
deleteUser(){
if(this.nowIndex == -1){//删除所有
this.users = [];
}else{
this.users.splice(this.nowIndex,1);//从指定索引位置开始删除，删除一个
}
}
}
})
}
</script>
</head>
<body>
<div class="container">
<h2 class="text-center">添加用户</h2>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="control-label col-sm-2">姓名：</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="inputEmail3" placeholder="请输入姓名" v-model="user.name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="control-label col-sm-2">年龄：</label>
<div class="col-sm-10">
<input type="age" class="form-control" id="inputEmail3" placeholder="请输入年龄" v-model="user.age">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="control-label col-sm-2">邮箱：</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱" v-model="user.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>
<br>
<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">
<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="nowIndex=index">删除</button>
</td>
</tr>
<tr>
<td colspan="5" class="text-right">
<button class="btn btn-warning" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">删除所有</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">×</button>
<h4 class="modal-title" v-show="nowIndex!==-1">确认要删除用户:{{users[nowIndex]?users[nowIndex].name:''}}吗？</h4>
<h4 class="modal-title" v-show="nowIndex===-1">确认要删除所有用户吗？</h4>
</div>
<div class="modal-body text-center">
<button class="btn btn-primary" data-dismiss="modal">取消</button>
<button class="btn btn-danger" data-dismiss="modal" v-on:click="deleteUser">确认</button>
</div>
</div>
</div>
</div>
<!-- 模态框结束 -->
</div>
</body>
</html>
