前面介绍了列表操作中的数据新增、删除的功能,本篇章来看看关键字查询的功能。
searchName
. var vm = new Vue({
el: '#app',
data: {
searchName:'', // 关键字
....
},
searchName
属性,后续用来基于这个searchName
来过滤数组数据。<!-- 搜素关键字 -->
<input v-model="searchName" type="text" class="form-control" id="input_keywords" placeholder="输入关键字">
3.在使用 v-for
指令循环每一行数据的时候,不再直接 item in list
,而是 in
一个 过滤的methods 方法,同时,把过滤条件searchName
传递进去:
<tr v-for="item in search(searchName)" :key="item.id">
search()
方法,在数据过滤的方法上,可以有两种处理方式。4.1 首先创建一个新的数组newList
,然后使用forEach
方法遍历数据数组list
,判断关键字searchName
是否包含在遍历数据中,可以使用if (item.name.indexOf(searchName) != -1)
来进行判断,如果存在,那么则会为1
,如果searchName
为空值,则会0
。在这种情况下,则将数据加入到新的数组newList
中,然后提供列表渲染数据。
methods: {
search(searchName) {
// 创建新的数组newList
var newList = [];
// 遍历数据,判断关键字是否存在,存在则加入newList中
this.list.forEach(item => {
// 如果indexOf为-1,则说明关键字不存在该字符串中,
// 反之,存在或者searchName为空字符串
if (item.name.indexOf(searchName) !== -1) {
newList.push(item)
}
});
// 将过滤后的newList返回,提供列表数据渲染
return newList
},
}
浏览器实现关键字搜索效果如下:
4.2 除了使用forEach
遍历数组外,还可以使用filter
过滤数组。上面使用forEach
方法还要自己创建一个newList
来处理数据,而filter
则是直接返回数组,不需要单独去创建。还有上面使用if (item.name.indexOf(searchName) != -1)
来判断关键字是否包含在字符串中,这里还可以使用includes
方法。
注意 : 在ES6
中,为字符串提供了一个新方法includes
,叫做 String.prototype.includes('要包含的字符串')
,如果包含,则返回 true
,否则返回 false
methods: {
search(searchName) {
// 使用filter则是返回过滤的数据自动生成数组
return this.list.filter(item => {
// 注意 : ES6中,为字符串提供了一个新方法,
// 叫做 String.prototype.includes('要包含的字符串')
// 如果包含,则返回 true ,否则返回 false
// contain
if (item.name.includes(searchName)) {
return item
}
})
},
}
浏览器实现关键字搜索效果如下: