2018.7.13vue知識小結
阿新 • • 發佈：2018-07-13
styles 鍵值 mar The right pri for循環 trap lse
1 //配置是否允許vue-devtools檢查代碼，方便調試，生產環境中需要設置為false 2 Vue.config.devtools=false; 3 Vue.config.productionTip=false; //阻止vue啟動時生成生產消息
for循環
1 <ul> 2 普通循環 3 <li v-for="value in arr">{{value}}</li> 4 <li v-for="value in user">{{value}}</li> 5 6 鍵值循環 7 <li v-for="(v,k) in arr">{{k}}={{v}}</li> 8 <li v-for="(v,k) in user">{{k}}={{v}}</li> 9 10 可以直接循環包含重復數據的集合，可以通過指定:key屬性綁定唯一key，當更新元素時可重用元素，提高效率，類似於vue1.0中track-by 11<li v-for="(v,k) in arr2" :key="k">{{v}}</li> 12 13 <li v-for="(user,index) in users"> 14 {{index+1}},{{user.id}},{{user.name}},{{user.age}} 15 </li> 16 </ul>
通過表單給table添加行：
1 <!DOCTYPE html> 2 <html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>練習：用戶管理</title> 6 <script src="js/vue.js"></script> 7 <link rel="stylesheet" href="bootstrap/bootstrap.min.css"> 8 <script src="bootstrap/jquery.min.js"></script> 9 <script src="bootstrap/bootstrap.min.js"></script> 10 <body> 11 <div class="contaienr"> 12 <h2 class="text-center">添加用戶</h2> 13 <form class="form-horizontal"> 14 <div class="form-group"> 15 <label for="name" class="control-label col-sm-2 col-sm-offset-2">姓名</label> 16 <div class="col-sm-6"> 17 <input class="form-control" id="name" placeholder="請輸入姓名" v-model="user.name"> 18 </div> 19 </div> 20 <div class="form-group"> 21 <label for="age" class="control-label col-sm-2 col-sm-offset-2">年 齡：</label> 22 <div class="col-sm-6"> 23 <input type="text" class="form-control" id="age" v-model="user.age" placeholder="請輸入年齡"> 24 </div> 25 </div> 26 <div class="form-group"> 27 <label for="email" class="control-label col-sm-2 col-sm-offset-2">郵 箱：</label> 28 <div class="col-sm-6"> 29 <input type="text" class="form-control" id="email" v-model="user.email" placeholder="請輸入郵箱"> 30 </div> 31 </div> 32 <div class="form-group text-center"> 33 <input type="button" class="btn btn-primary" value="重置" @click="addUser"> 34 <input type="reset" class="btn btn-primary" value="添加" > 35 </div> 36 </form> 37 <hr> 38 <!--表格--> 39 <table class="table table-bordered table-hover"> 40 <caption class="h3 text-center text-info">用戶列表</caption> 41 <thead> 42 <tr> 43 <th class="text-center">序號</th> 44 <th class="text-center">姓名</th> 45 <th class="text-center">年齡</th> 46 <th class="text-center">郵箱</th> 47 <th class="text-center">操作</th> 48 </tr> 49 </thead> 50 <tbody> 51 <tr v-for="(user,index) in users" class="text-center"> 52 <td>{{index+1}}</td> 53 <td>{{user.name}}</td> 54 <td>{{user.age}}</td> 55 <td>{{user.email}}</td> 56 <td> 57 <button class="btn btn-danger btn-sm" @click="nowIndex=index" data-toggle="modal" data-target="#del">刪除</button> 58 </td> 59 </tr> 60 <tr> 61 <td colspan="5" class="text-right"> 62 <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1" data-toggle="modal" data-target="#del">刪除所有</button> 63 </td> 64 </tr> 65 </tbody> 66 </table> 67 68 69 <!-- 模態框，彈出框 --> 70 <div class="modal fade" id="del"> 71 <div class="modal-dialog"> 72 <div class="modal-content"> 73 <div class="modal-header"> 74 <button class="close" data-dismiss="modal"> 75 <span>×</span> 76 </button> 77 <h4 class="modal-title" v-show="nowIndex!==-1">確認要刪除用戶：{{users[nowIndex]?users[nowIndex].name:‘‘}} 嗎？</h4> 78 <h4 class="modal-title" v-show="nowIndex===-1">確認要刪除所有用戶嗎？</h4> 79 </div> 80 <div class="modal-body text-center"> 81 <button class="btn btn-primary" data-dismiss="modal">取消</button> 82 <button class="btn btn-primary" data-dismiss="modal" @click="deleteUser">確認</button> 83 </div> 84 </div> 85 </div> 86 </div> 87 </div> 88 </body> 89 </html> 90 <script> 91 let vm=new Vue({ 92 el:‘.contaienr‘, 93 data:{ 94 users:[ 95 {name:‘tom‘,age:24,email:‘[email protected]‘}, 96 {name:‘jack‘,age:23,email:‘[email protected]‘} 97 ], 98 user:{}, 99 nowIndex:-1, 100 }, 101 methods:{ 102 addUser(){ 103 this.users.push(this.user) 104 this.user={} 105 }, 106 deleteUser(){ 107 if(this.nowIndex=-1){ 108 this.users=[]; 109 }else{ 110 this.users.splice(this.nowIndex,1); //從指定索引位置開始刪除，刪除一個 111 112 } 113 } 114 } 115 }) 116 </script>
2018.7.13vue知識小結