vue 中的通过搜索框进行数据过滤的过程

 1 <template>
 2  <div>
 3     <input type="text" v-model="searchId" placeholder="搜索">
 4     <table class="tab">
 5       <tr>
 6         <th>序号</th>
 7         <th>名字</th>
 8         <th>时间</th>
 9         <th>操作</th>
10       </tr>
11       <tr v-for="(item,index) in newlist" :key="index">
12         <td>{{item.id}}</td>
13         <td>{{item.name}}</td>
14         <td>{{item.ctime}}</td>
15         <td><a href="#" @click="dele(index)">删除{{index}}</a></td>
16       </tr>
17　　　　<!-- <tr v-if="list.length===0"><td colspan="4">已经没有数据了，请添加数据吧 123</td></tr> -->

18     </table> 
19  </div>
20 </template>
21 
22 <script>
23  export default {
24    data () {
25      return {
26         searchId:"",
27         list:[
28          {id:1,name:"cc",ctime:new Date()},
29          {id:2,name:"zs",ctime:new Date()},
30          {id:3,name:"ss",ctime:new Date()}
31        ],
32      }
33    },
34    computed:{
35        newlist(){
36     //1. 常规做法
37     //     var that=this
38     //     function iscontainer(value){
39     //       return  value.name.indexOf(that.searchId)!==-1
40     //     }
41     //     var temlist=this.list.filter(iscontainer)
42     // iscontainer是一个函数，value就是list中的每一项的值,通过判断是否包含来来过滤数据内容
43     //     return temlist
44     //    }
45     //2.es6做法
46         return this.list.filter(value=>value.name.indexOf(this.searchId)!==-1)  
47 
48         }
49    }
50 }
51 </script>
52 
53 <style>
54 
55  
56 </style>

 

转载于:https://www.cnblogs.com/liweiz/p/10557832.html