Vue,品牌列表案例(仅添加,删除,搜索)
本节重点是把item, 变成了 search, 为的是能够进行动态查询
还有ES6的用法,数组的方法
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <script src="../js/vue.js"></script>
7 <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
8 </head>
9 <body>
10 <div id="app">
11
12
13 <div class="panel panel-primary">
14 <div class="panel-heading">
15 <h3 class="panel-title">添加品牌</h3>
16 </div>
17 <!-- form-inline 填在父元素里, 里面的子元素 占一行 -->
18 <div class="panel-body form-inline">
19 <label>
20 Id:
21 <input type="text" class="form-control" v-model="id">
22 </label>
23
24 <label>
25 Name:
26 <input type="text" class="form-control" v-model="name">
27 </label>
28
29 <!-- 在Vue中,使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了
30 不加()也可以, 只不过不能传参-->
31 <input type="button" class="btn btn-primary" value="添加" @click="add()"/>
32
33
34 <label>
35 搜索名称关键字:
36 <input type="text" class="form-control" v-model="keywords" />
37 </label>
38 </div>
39 </div>
40
41
42 <table class="table table-bordered table-hover table-striped">
43 <thead>
44 <tr>
45 <th>Id</th>
46 <th>Name</th>
47 <th>Ctime</th>
48 <th>Operation</th>
49 </tr>
50 </thead>
51 <tbody>
52 <!-- 之前, v-for 中的数据, 都是直接从 data 上的list中直接渲染过来的 -->
53 <!-- 现在, 我们自定义了一个 search 方法,同时, 把 所有的关键字,通过传参的形式,传递给了
54 search 方法 -->
55 <!-- 在 search 方法内部,通过 执行 for 循环, 把所有符合 搜索关键字的数据,保存到 一个新数组
56 中, 返回-->
57 <tr v-for="item in search(keywords)" :key="item.id">
58 <td>{{ item.id }}</td>
59 <td>{{ item.name }}</td>
60 <td>{{ item.ctime }}</td>
61 <td>
62 <!-- 使用 .prevent 阻止默认行为, 否则超链接跳转页面 -->
63 <a href="#" @click.prevent="del(item.id)">删除</a>
64 </td>
65 </tr>
66 </tbody>
67 </table>
68 </div>
69 </body>
70 </html>
71 <script>
72 var vm = new Vue({
73 el: '#app',
74 data:{
75 id:'',
76 name:'',
77 keywords:'',
78 list:[
79 { id: 1, name: '奔驰', ctime: new Date() },
80 { id: 2, name: '宝马', ctime: new Date() },
81 { id: 3, name: '五菱宏光', ctime: new Date() }
82 ]
83 },
84 methods:{
85 add(){
86 // console.log("5555")
87 //分析:
88 //1. 获取到 id 和 name , 直接从data 上面获取
89 //2. 组织出一个对象
90 //3. 把这个对象, 调用 数组的 相关方法, 添加到data 的 list 中
91 //4. 注意: 在Vue中, 已经实现了数据的双向绑定, 每当我们修改了 data 中的数据, Vue
92 // 默认监听 数据的改动, 自动把最新的数据, 应用到页面上;
93
94 // 5. 当我们意识到上面的第四步的时候,就证明大家已经入门Vue了, 我们更多的是在进行 VM中
95 // Model 数据的操作, 同时, 在操作 Model数据的时候, 指定的业务逻辑操作
96
97 var car = { id: this.id, name: this.name, ctime: new Date() }
98 this.list.push(car)
99
100 // 将输入框清空, 否则输入的内容还在
101 this.id = this.name = ''
102 },
103 del(id){
104 // 分析:
105 // 1. 如何根据Id, 找到要删除这一项的索引
106 // 2. 如果找到索引了, 直接调用 数组的 splice 方法
107
108 // 方法一:
109 // some 根据指定的条件判断 (循环)
110 // this.list.some((item, i) => {
111 // if(item.id == id) {
112 // //从索引为 i的位置开始删, 删1个
113 // this.list.splice(i, 1)
114 // // 在 数组的 some 方法中,如果 return true,就会立即终止这个数组的后续循环
115 // return true;
116 // }
117 // })
118
119 // 方法二
120 //数组查找当前索引
121 var index = this.list.findIndex(item => {
122 if (item.id == id) {
123 return true;
124 }
125 })
126 console.log(index)
127
128 this.list.splice(index, 1)
129 },
130 search(keywords){ //搜索
131
132 // 方法一
133 /* var newlist = []
134 this.list.forEach( item => {
135 if ( item.name.indexOf(keywords) != -1) {
136 newlist.push(item)
137 }
138 })
139 return newlist */
140
141 //方法二
142 // 注意: forEach some filter findIndex 这些都属于数组的新方法
143 // 都会对数组中的每一项, 进行遍历, 执行相关操作
144
145 return this.list.filter( item => {
146 // var newlist = this.list.filter( item => {
147 // if(item.name.indexOf(keywords) != -1)
148
149 // 注意 : ES6中, 为字符串提供了一个新方法, 叫做 String.prototype.includes('要包含的字符串')
150 //如果包含, 则返回 true , 否则返回 false
151 //jq 中有个类似的方法是 contain
152 if(item.name.includes(keywords)){
153 return item
154 }
155 })
156
157 // return newlist
158 },
159 }
160 })
161
162 </script>
搜索第二种方法直接 return this.list.filter(), 就不用 var newlist = return this.list.filter(), 所以结尾return newlist 省略
2019-06-13 16:02:00