1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 </head>
11
12 <body>
13 <div id="app">
14 id: <input type="text" v-model="id">
15 name: <input type="text" v-model="name">
16 <button @click='add'>添加</button>
17 请输入关键字: <input type="text" v-model="keywords"><button @change='search'>检索</button>
18 <table>
19 <tr v-for="(item,index) in search()">
20 <td>{{item.id}}</td>
21 <td>{{item.name}}</td>
22 <td><a href="#" @click.prevent='del(item.id)'>删除</a></td>
23 </tr>
24 </table>
25 </div>
26 <script>
27 var vm = new Vue({
28 el: '#app',
29 data: {
30 id: '',
31 name: '',
32 keywords: '',
33 list: [{
34 id: 1,
35 name: '宝马',
36
37 },
38 {
39 id: 2,
40 name: '凯迪拉克',
41
42 },
43 {
44 id: 3,
45 name: '白龙马',
46
47 },
48 {
49 id: 4,
50 name: '奥迪',
51
52 }
53 ]
54 },
55 methods: {
56 add() {
57 this.list.push({
58 id: this.id,
59 name: this.name
60 });
61 this.id = '';
62 this.name = '';
63 },
64 del(id) {
65 const index = this.list.findIndex(function (item, i, arr) {
66 return item.id == id;
67 });
68 this.list.splice(index, 1);
69 },
70 // search() {
71 // let arr = [];
72 // for (index in this.list) {
73 // // if (this.list[index].name.indexOf(this.keywords) != -1) {
74 // // arr.push(this.list[index]);
75 // // }
76 // //另一种更简洁的方法
77 // if (this.list[index].name.includes(this.keywords)) {
78 // arr.push(this.list[index]);
79 // }
80 // }
81 // return arr;
82 // }
83
84 //简易版本
85 // search() {
86 // const arr = this.list.filter((item) => {
87 // return item.name.includes(this.keywords);
88 // });
89 // return arr;
90 // }
91 //还可以再简化,一行搞定
92 search() {
93 return this.list.filter(item => item.name.includes(this.keywords));
94 }
95 }
96 });
97 </script>
98 </body>
99
100 </html>
