标签：htm tle cli lan inf btn class smi head
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:‘tom@itany.com‘}, 96 {name:‘jack‘,age:23,email:‘jack@sina.com‘} 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>
标签：htm tle cli lan inf btn class smi head
原文地址：https://www.cnblogs.com/yangguoe/p/9305891.html
