vue和bootstrap的应用：用户管理

  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>&times;</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>