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>