vue-用户管理

一、vue的使用案例

1、效果展示

 

 

2、代码实现

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>用户管理</title>
  6 <!--引入vue-->
  7     <script src="../vue/vue.js"></script>
  8 <!--引入bootstrap-->
  9     <script src="../bootstrap/jquery.min.js"></script>
 10     <script src="../bootstrap/bootstrap.min.js"></script>
 11     <link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
 12 
 13 <!--vue的写法-->
 14     <script>
 15         window.onload=function(){
 16             let vm = new Vue({
 17                 el:'.container',
 18                 data:{
 19                     //对象数组users来存储用户信息
 20                     users:[
 21                         {
 22                             name:'tom',
 23                             age:20,
 24                             email:'110@126.com'
 25                         },
 26                         {
 27                             name:"tony",
 28                             age:28,
 29                             email:'120@126.com'
 30                         }
 31                     ],
 32                     //user存储单条用户信息
 33                     user:{},
 34                     //当前要删除用户的索引值,默认值为-1
 35                     nowIndex:-1
 36                 },
 37                 methods:{
 38                     addUser(){
 39                         this.users.push(this.user);
 40                         this.user={}
 41                     },
 42                     deleteUser(){
 43                         if(this.nowIndex===-1){ 
 44                             this.users={}   //删除所有用户
 45                         }else{
 46                            this.users.splice(this.nowIndex,1)  //从指定所以位置开始删除1个元素 
 47                         } 
 48                     }
 49                 }
 50             });
 51         }
 52     </script>
 53 </head>
 54 <body>
 55     <div class="container">
 56         <h2 class="text-center">用户管理</h2>
 57         <form action="" class='form-horizontal'>
 58             <div class="form-group">
 59                 <label for="name" class="col-sm-2 col-sm-offset-2 control-label">姓名</label>
 60                 <div class="col-sm-6">
 61                  <input type="text" id="name" class='form-control' v-model='user.name' placeholder="请输入姓名">                   
 62                 </div>
 63             </div>
 64              <div class="form-group">
 65                 <label for="age" class="col-sm-2 col-sm-offset-2 control-label">年龄</label>
 66                 <div class="col-sm-6">
 67                  <input type="text" id="age" class='form-control' v-model='user.age' placeholder="请输入年龄">                   
 68                 </div>
 69             </div>
 70              <div class="form-group">
 71                 <label for="email" class="col-sm-2 col-sm-offset-2 control-label">邮箱</label>
 72                 <div class="col-sm-6">
 73                  <input type="text" id="email" class='form-control' v-model='user.email' placeholder="请输入邮箱">                   
 74                 </div>
 75             </div>
 76             <div class="form-group text-center">
 77                 <input type="button" value="添加" class="btn btn-primary" v-on:click='addUser'>
 78                 <input type="button" value="重置" class="btn btn-primary">
 79             </div>
 80         </form>   
 81         <hr>
 82         <table class="table table-bordered table-hover">
 83            <caption class="h3 text-center text-ifo">用户列表</caption> 
 84            <thead>
 85                <tr>
 86                    <th class="text-center">序号</th>
 87                    <th class="text-center">姓名</th>
 88                    <th class="text-center">年龄</th>
 89                    <th class="text-center">邮箱</th>
 90                    <th class="text-center">操作</th>
 91                </tr>
 92            </thead>
 93            <tbody>
 94                <tr v-for="(user,index) in users"  class="text-center">
 95                    <td>{{index+1}}</td>
 96                    <td>{{user.name}}</td>
 97                    <td>{{user.age}}</td>
 98                    <td>{{user.email}}</td>
 99                    <td>
100                        <button class="btn btn-success btn-sm">编辑</button>
101                        <button class="btn btn-danger btn-sm" data-toggle='modal' data-target='#del' v-on:click='nowIndex=index'>删除</button>
102                    </td>
103                </tr>
104                <tr class="text-right">
105                    <td colspan="6">
106                         <button class="btn btn-danger btn-sm" data-toggle='modal' data-target='#del' v-on:click='nowIndex=-1'>删除所有</button>
107                    </td>
108                </tr>
109            </tbody>
110         </table>
111 
112         <div class="modal" id='del'>
113             <div class="modal-dialog">
114                 <div class="modal-content">
115                     <div class="modal-header">
116                         <button class="close" data-dismiss='modal'>
117                             <span>&times;</span>
118                         </button>
119                         <h4 class="modal-title" v-show='nowIndex!==-1'>确定要删除用户{{users[nowIndex]?users[nowIndex].name:''}}吗？</h4>
120                         <h4 class="modal-title" v-show='nowIndex===-1'>确定要删除所有用户吗？</h4>
121                     </div>
122                     <div class="modal-body text-center">
123                         <button class="btn btn-primary" data-dismiss='modal'>取消</button>
124                         <button class="btn btn-primary" data-dismiss='modal' v-on:click='deleteUser'>确认</button>
125                     </div>
126                 </div>
127             </div>
128         </div>
129     </div>  
130 </body>
131 </html>

 

posted @ 2021-08-24 13:45  AnnLing  阅读(230)  评论(0)    收藏  举报