vue 中 通过input 输入框 进行过滤模糊查询

<template>
  <div>
     <input type="text" v-model="searchId" placeholder="搜索">
     <table class="tab">
       <tr>
         <th>序号</th>
         <th>名字</th>
         <th>时间</th>
       </tr>        //遍历这里用newlist , 不要用list; 切记!!!!!
       <tr v-for="(item,index) in newlist" :key="index">
         <td>{{item.id}}</td>
         <td>{{item.name}}</td>
         <td>{{item.ctime}}</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做法 
     // filter为在list的基础上创建一个新的数组,不会改变原数组   //这里的name是上方数组中的name
         return this.list.filter(value=>value.name.indexOf(this.searchId)!==-1)  
         }
    }
 }
 </script>