vue 搜索关键字

 <div id="app">
        <div class="panel panel-primary">
          <div class="panel-heading">
              <h3 class="panel-title">添加</h3>
          </div>
        <div class="panel-body form-inline">
            <label>
                id:
                <input type="text" class="form-control" v-model="id">
        
            </label>
            <label>
                    Name:
                    <input type="text" class="form-control" v-model="name">
            
                </label>
                <label>
                    
                        <input type="button" value="添加" class="btn btn-primary"  @click="add()">
                
                    </label>
                    <label>
                            搜素关键字:
                            <input type="text" class="form-control" v-model="keywords">
                    
                        </label>
        </div>

        </div>
       <table class="table table-bordered table-hover table-striped">
           <thead>
               <tr>
                   <th>id</th>
                   <th>name</th>
                   <th>ctime</th>
                   <th>operation</th>
               </tr>
           </thead>
           <tbody>
               <tr v-for="item in search(keywords)" :key="item.id">
                   <td>{{ item.id }}</td>
                   <td v-text="item.name"></td>
                   <td>{{ item.ctime }}</td>
                   <!-- 阻止默认行为 -->
                   <td><a href="" @click.prevent="del(item.id)">删除</a></td>
               </tr>
           </tbody>
       </table>

    </div>

var vm = new Vue({
            el: "#app",
            data: {
                id:'',
                name:'',
                keywords:"",
                list: [{
                    id: 1, name: '奔驰', ctime: new Date()
                },
                {
                    id: 2, name: '宝马', ctime: new Date()
                }
                ]
            },
            methods: {
                add(){
                    // 1.获取到id 和name ,直接从data上面获取
                    // 2.组织出一个对象
                    // 3.把这个对象.调用 数组的相关方法,添加到当前data list中
                 console.log("ox")
                 var car ={id:this.id,name:this.name,ctime:new Date()}
                 this.list.push(car)
                 this.id=this.name=''
                },
                //点击删除,按照id删除
                del(id){
                //   var car ={id:this.id,name:this.name,ctime:new Date()}
                //some 终止后面循环
                //   this.list.pop(car)
               /*
                       this.list.some((item, i)=>{
                       
                           if(item.id == id){
                               this.list.splice(i,1)
                               console.log("e")
                               return true
                           }

                       })*/
                       //删除事件
              var index= this.list.findIndex((item,i)=>{
                        if(item.id==i){
                            return true
                        }
                    })
                    this.list.splice(index,1)
                },
                search(keywords){
                    // var newList=[]
                    // this.list.forEach( item => {
                    //     if(item.name.indexOf(keywords) !=-1){
                    //      newList.push(item)
                    //     }
                    // });
                    // return newList
         
                    return this.list.filter(item=>{
                      if(item.name.includes(keywords)){
                          return item
                      }
                    })

                }
               
            }
        })