1  <div id="app">
 2         <div class="panel panel-primary">
 3           <div class="panel-heading">
 4               <h3 class="panel-title">添加</h3>
 5           </div>
 6         <div class="panel-body form-inline">
 7             <label>
 8                 id:
 9                 <input type="text" class="form-control" v-model="id">
10         
11             </label>
12             <label>
13                     Name:
14                     <input type="text" class="form-control" v-model="name">
15             
16                 </label>
17                 <label>
18                     
19                         <input type="button" value="添加" class="btn btn-primary"  @click="add()">
20                 
21                     </label>
22                     <label>
23                             搜素关键字:
24                             <input type="text" class="form-control" v-model="keywords">
25                     
26                         </label>
27         </div>
28 
29         </div>
30        <table class="table table-bordered table-hover table-striped">
31            <thead>
32                <tr>
33                    <th>id</th>
34                    <th>name</th>
35                    <th>ctime</th>
36                    <th>operation</th>
37                </tr>
38            </thead>
39            <tbody>
40                <tr v-for="item in search(keywords)" :key="item.id">
41                    <td>{{ item.id }}</td>
42                    <td v-text="item.name"></td>
43                    <td>{{ item.ctime }}</td>
44                    <!-- 阻止默认行为 -->
45                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
46                </tr>
47            </tbody>
48        </table>
49 
50     </div>
 1 var vm = new Vue({
 2             el: "#app",
 3             data: {
 4                 id:'',
 5                 name:'',
 6                 keywords:"",
 7                 list: [{
 8                     id: 1, name: '奔驰', ctime: new Date()
 9                 },
10                 {
11                     id: 2, name: '宝马', ctime: new Date()
12                 }
13                 ]
14             },
15             methods: {
16                 add(){
17                     // 1.获取到id 和name ,直接从data上面获取
18                     // 2.组织出一个对象
19                     // 3.把这个对象.调用 数组的相关方法,添加到当前data list中
20                  console.log("ox")
21                  var car ={id:this.id,name:this.name,ctime:new Date()}
22                  this.list.push(car)
23                  this.id=this.name=''
24                 },
25                 //点击删除,按照id删除
26                 del(id){
27                 //   var car ={id:this.id,name:this.name,ctime:new Date()}
28                 //some 终止后面循环
29                 //   this.list.pop(car)
30                /*
31                        this.list.some((item, i)=>{
32                        
33                            if(item.id == id){
34                                this.list.splice(i,1)
35                                console.log("e")
36                                return true
37                            }
38 
39                        })*/
40                        //删除事件
41               var index= this.list.findIndex((item,i)=>{
42                         if(item.id==i){
43                             return true
44                         }
45                     })
46                     this.list.splice(index,1)
47                 },
48                 search(keywords){
49                     // var newList=[]
50                     // this.list.forEach( item => {
51                     //     if(item.name.indexOf(keywords) !=-1){
52                     //      newList.push(item)
53                     //     }
54                     // });
55                     // return newList
56          
57                     return this.list.filter(item=>{
58                       if(item.name.includes(keywords)){
59                           return item
60                       }
61                     })
62 
63                 }
64                
65             }
66         })
67