1 <!-- 筛选demo --> 2 <template> 3 <div> 4 <input type="text" v-model="search"> 5 <ul> 6 <!-- 这里循环遍历的是items,不再是data里的list数组 --> 7 <li v-for="(item,index) in items"> 8 <span>{{item.name}}</span> 9 <span>{{item.msg}}</span> 10 </li> 11 </ul> 12 </div> 13 </template>
1 2 export default { 3 data () { 4 return { 5 search:'', 6 list:[ 7 {name:'AAA',msg:'aaa文本介绍1'}, 8 {name:'BBB',msg:'bbb文本介绍2'}, 9 {name:'CCC',msg:'ccc文本介绍3'}, 10 {name:'DDD',msg:'ddd文本介绍4'}, 11 {name:'EEE',msg:'eee文本介绍5'}, 12 ] 13 } 14 }, 15 16 computed: { 17 //过滤方法 18 items: function() { 19 var _search = this.search; 20 if (_search) { 21 //不区分大小写处理 22 var reg = new RegExp(_search, 'ig') 23 //es6 filter过滤匹配,有则返回当前,无则返回所有 24 return this.list.filter(function(e) { 25 //匹配所有字段 26 return Object.keys(e).some(function(key) { 27 return e[key].match(reg); 28 }) 29 //匹配某个字段 30 // return e.name.match(reg); 31 }) 32 }; 33 return this.list; 34 } 35 }, 36 } 37