Vue,品牌列表案例（仅添加,删除）
提到的 => 和 some 等使用方法需要看，好多语法要看
=> 这个this 指向的具体作用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="../js/vue.js"></script> 7 <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/> 8 </head> 9 <body> 10 <div id="app"> 11 12 13 <div class="panel panel-primary"> 14 <div class="panel-heading"> 15 <h3 class="panel-title">添加品牌</h3> 16 </div> 17 <!-- form-inline 填在父元素里， 里面的子元素 占一行 --> 18 <div class="panel-body form-inline"> 19 <label> 20 Id: 21 <input type="text" class="form-control" v-model="id"> 22 </label> 23 24 <label> 25 Name: 26 <input type="text" class="form-control" v-model="name"> 27 </label> 28 29 <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 30 不加（）也可以， 只不过不能传参--> 31 <input type="button" class="btn btn-primary" value="添加" @click="add()"/> 32 </div> 33 </div> 34 35 36 <table class="table table-bordered table-hover table-striped"> 37 <thead> 38 <tr> 39 <th>Id</th> 40 <th>Name</th> 41 <th>Ctime</th> 42 <th>Operation</th> 43 </tr> 44 </thead> 45 <tbody> 46 <tr v-for="item in list" :key="item.id"> 47 <td>{{ item.id }}</td> 48 <td>{{ item.name }}</td> 49 <td>{{ item.ctime }}</td> 50 <td> 51 <!-- 使用 .prevent 阻止默认行为， 否则超链接跳转页面 --> 52 <a href="#" @click.prevent="del(item.id)">删除</a> 53 </td> 54 </tr> 55 </tbody> 56 </table> 57 </div> 58 </body> 59 </html> 60 <script> 61 var vm = new Vue({ 62 el: '#app', 63 data:{ 64 id:'', 65 name:'', 66 list:[ 67 { id: 1, name: '奔驰', ctime: new Date() }, 68 { id: 2, name: '宝马', ctime: new Date() }, 69 { id: 3, name: '五菱宏光', ctime: new Date() } 70 ] 71 }, 72 methods:{ 73 add(){ 74 // console.log("5555") 75 //分析: 76 //1. 获取到 id 和 name , 直接从data 上面获取 77 //2. 组织出一个对象 78 //3. 把这个对象, 调用 数组的 相关方法, 添加到data 的 list 中 79 //4. 注意: 在Vue中, 已经实现了数据的双向绑定, 每当我们修改了 data 中的数据, Vue 80 // 默认监听 数据的改动, 自动把最新的数据, 应用到页面上; 81 82 // 5. 当我们意识到上面的第四步的时候,就证明大家已经入门Vue了, 我们更多的是在进行 VM中 83 // Model 数据的操作, 同时, 在操作 Model数据的时候, 指定的业务逻辑操作 84 85 var car = { id: this.id, name: this.name, ctime: new Date() } 86 this.list.push(car) 87 88 // 将输入框清空, 否则输入的内容还在 89 this.id = this.name = '' 90 }, 91 del(id){ 92 // 分析: 93 // 1. 如何根据Id, 找到要删除这一项的索引 94 // 2. 如果找到索引了, 直接调用 数组的 splice 方法 95 96 // 方法一: 97 // some 根据指定的条件判断 (循环) 98 // this.list.some((item, i) => { 99 // if(item.id == id) { 100 // //从索引为 i的位置开始删, 删1个 101 // this.list.splice(i, 1) 102 // // 在 数组的 some 方法中,如果 return true,就会立即终止这个数组的后续循环 103 // return true; 104 // } 105 // }) 106 107 // 方法二 108 //数组查找当前索引 109 var index = this.list.findIndex(item => { 110 if (item.id == id) { 111 return true; 112 } 113 }) 114 console.log(index) 115 116 this.list.splice(index, 1) 117 } 118 } 119 }) 120 </script>