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>