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