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

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

     </table>
  </div>
 </template>

 <script>
  export default {
    data () {
      return {
         searchId:"",
         list:[
          {id:1,name:"cc",ctime:new Date()},
          {id:2,name:"zs",ctime:new Date()},
          {id:3,name:"ss",ctime:new Date()}
        ],
      }
    },
    computed:{
        newlist(){
     //1. 常规做法
     //     var that=this
     //     function iscontainer(value){
     //       return  value.name.indexOf(that.searchId)!==-1
     //     }
     //     var temlist=this.list.filter(iscontainer)
     // iscontainer是一个函数，value就是list中的每一项的值,通过判断是否包含来来过滤数据内容
     //     return temlist
     //    }
     //2.es6做法
         return this.list.filter(value=>value.name.indexOf(this.searchId)!==-1)  

         }
    }
 }
 </script>

 <style>

 </style>