Vue,品牌列表案例（仅添加,删除，搜索）
本节重点是把item， 变成了 search， 为的是能够进行动态查询
还有ES6的用法，数组的方法
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 33 34 <label> 35 搜索名称关键字： 36 <input type="text" class="form-control" v-model="keywords" /> 37 </label> 38 </div> 39 </div> 40 41 42 <table class="table table-bordered table-hover table-striped"> 43 <thead> 44 <tr> 45 <th>Id</th> 46 <th>Name</th> 47 <th>Ctime</th> 48 <th>Operation</th> 49 </tr> 50 </thead> 51 <tbody> 52 <!-- 之前， v-for 中的数据， 都是直接从 data 上的list中直接渲染过来的 --> 53 <!-- 现在， 我们自定义了一个 search 方法，同时， 把 所有的关键字，通过传参的形式，传递给了 54 search 方法 --> 55 <!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组 56 中， 返回--> 57 <tr v-for="item in search(keywords)" :key="item.id"> 58 <td>{{ item.id }}</td> 59 <td>{{ item.name }}</td> 60 <td>{{ item.ctime }}</td> 61 <td> 62 <!-- 使用 .prevent 阻止默认行为， 否则超链接跳转页面 --> 63 <a href="#" @click.prevent="del(item.id)">删除</a> 64 </td> 65 </tr> 66 </tbody> 67 </table> 68 </div> 69 </body> 70 </html> 71 <script> 72 var vm = new Vue({ 73 el: '#app', 74 data:{ 75 id:'', 76 name:'', 77 keywords:'', 78 list:[ 79 { id: 1, name: '奔驰', ctime: new Date() }, 80 { id: 2, name: '宝马', ctime: new Date() }, 81 { id: 3, name: '五菱宏光', ctime: new Date() } 82 ] 83 }, 84 methods:{ 85 add(){ 86 // console.log("5555") 87 //分析: 88 //1. 获取到 id 和 name , 直接从data 上面获取 89 //2. 组织出一个对象 90 //3. 把这个对象, 调用 数组的 相关方法, 添加到data 的 list 中 91 //4. 注意: 在Vue中, 已经实现了数据的双向绑定, 每当我们修改了 data 中的数据, Vue 92 // 默认监听 数据的改动, 自动把最新的数据, 应用到页面上; 93 94 // 5. 当我们意识到上面的第四步的时候,就证明大家已经入门Vue了, 我们更多的是在进行 VM中 95 // Model 数据的操作, 同时, 在操作 Model数据的时候, 指定的业务逻辑操作 96 97 var car = { id: this.id, name: this.name, ctime: new Date() } 98 this.list.push(car) 99 100 // 将输入框清空, 否则输入的内容还在 101 this.id = this.name = '' 102 }, 103 del(id){ 104 // 分析: 105 // 1. 如何根据Id, 找到要删除这一项的索引 106 // 2. 如果找到索引了, 直接调用 数组的 splice 方法 107 108 // 方法一: 109 // some 根据指定的条件判断 (循环) 110 // this.list.some((item, i) => { 111 // if(item.id == id) { 112 // //从索引为 i的位置开始删, 删1个 113 // this.list.splice(i, 1) 114 // // 在 数组的 some 方法中,如果 return true,就会立即终止这个数组的后续循环 115 // return true; 116 // } 117 // }) 118 119 // 方法二 120 //数组查找当前索引 121 var index = this.list.findIndex(item => { 122 if (item.id == id) { 123 return true; 124 } 125 }) 126 console.log(index) 127 128 this.list.splice(index, 1) 129 }, 130 search(keywords){ //搜索 131 132 // 方法一 133 /* var newlist = [] 134 this.list.forEach( item => { 135 if ( item.name.indexOf(keywords) != -1) { 136 newlist.push(item) 137 } 138 }) 139 return newlist */ 140 141 //方法二 142 // 注意: forEach some filter findIndex 这些都属于数组的新方法 143 // 都会对数组中的每一项, 进行遍历, 执行相关操作 144 145 return this.list.filter( item => { 146 // var newlist = this.list.filter( item => { 147 // if(item.name.indexOf(keywords) != -1) 148 149 // 注意 : ES6中, 为字符串提供了一个新方法, 叫做 String.prototype.includes('要包含的字符串') 150 //如果包含, 则返回 true , 否则返回 false 151 //jq 中有个类似的方法是 contain 152 if(item.name.includes(keywords)){ 153 return item 154 } 155 }) 156 157 // return newlist 158 }, 159 } 160 }) 161 162 </script>
搜索第二种方法直接 return this.list.filter(), 就不用 var newlist = return this.list.filter()， 所以结尾return newlist 省略
2019-06-13 16:02:00