vue检索

 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