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>