1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue-Bootstrap：用户管理</title> 6 <script src="https://unpkg.com/vue/dist/vue.js"></script> 7 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 8 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 9 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 10 </head> 11 12 <body> 13 <div class="container"> 14 <h2 class="text-center">添加用户</h2> 15 <form class="form-horizontal"> 16 <div class="form-group"> 17 <label for="name" class="control-label col-sm-2 col-sm-offset-2">姓名：</label> 18 <div class="col-sm-6"> 19 <input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名"></input> 20 </div> 21 </div> 22 23 <div class="form-group"> 24 <label for="age" class="control-label col-sm-2 col-sm-offset-2">年龄：</label> 25 <div class="col-sm-6"> 26 <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄"></input> 27 </div> 28 </div> 29 30 <div class="form-group"> 31 <label for="email" class="control-label col-sm-2 col-sm-offset-2">邮箱：</label> 32 <div class="col-sm-6"> 33 <input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱"></input> 34 </div> 35 </div> 36 37 <div class="form-group text-center"> 38 <input type="button" value="添加" class="btn btn-primary" v-on:click="addUser"> 39 <input type="reset" value="重置" class="btn btn-primary"> 40 </div> 41 </form> 42 <hr> 43 44 <table class="table table-bordered table-hover"> 45 <caption class="h3 text-center text-info">用户列表</caption> 46 <thead> 47 <tr> 48 <th class="text-center">序号</th> 49 <th class="text-center">姓名</th> 50 <th class="text-center">年龄</th> 51 <th class="text-center">邮箱</th> 52 <th class="text-center">操作</th> 53 </tr> 54 </thead> 55 <tbody> 56 <tr class="text-center" v-for="(user,index) in users"> 57 <td >{{index+1}}</td> 58 <td>{{user.name}}</td> 59 <td>{{user.age}}</td> 60 <td>{{user.email}}</td> 61 <td> 62 <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="currentIndex=index">删除</button> 63 </td> 64 </tr> 65 <tr> 66 <td colspan="5" class="text-right"> 67 <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="currentIndex=-1">删除所有</button> 68 </td> 69 </tr> 70 </tbody> 71 </table> 72 <div class="modal" id="del"> 73 <div class="modal-dialog"> 74 <div class="modal-content"> 75 <div class="modal-header"> 76 <button class="close" data-dismiss="modal"> 77 <span>×</span> 78 </button> 79 <h4 class="modal-tittle">确认要删除用户吗？</h4> 80 </div> 81 82 <div class="modal-body text-center"> 83 <button class="btn btn-primary" data-dismiss="modal">取消</button> 84 <button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">确认</button> 85 </div> 86 </div> 87 </div> 88 </div> 89 </div> 90 91 <script> 92 new Vue( 93 { 94 el:".container", 95 data: { 96 users:[ 97 {name:'tom', age:24, email: 'tom@sina.com'}, 98 {name:'jack', age:25, email: 'jack@qq.com'} 99 ], 100 user: {}, 101 currentIndex: -1 102 }, 103 methods: { 104 addUser(){ 105 this.users.push(this.user); 106 this.user={}; 107 }, 108 deleteUser() { 109 if(this.currentIndex===-1) { 110 this.users=[]; 111 } else { 112 this.users.splice(this.currentIndex,1); 113 } 114 } 115 } 116 } 117 ); 118 </script> 119 </body> 120 <html>