【Vue实践】列表搜索框中模糊搜索功能的两种实现方式
文章目录1、Demo演示2、HTML结构3、实现3.1 基于计算属性`computed`实现3.2 基于侦听器`watch`实现1、Demo演示模糊搜索功能是日常开发中常见的一种功能,这里用两种方式进行模拟实现。2、HTML结构<template><div><div><input type="text" v-model="keyWord"></
·
1、Demo演示
模糊搜索
功能是日常开发中常见的一种功能,这里用两种方式进行模拟实现。
2、HTML结构
<template>
<div>
<div><input type="text" v-model="keyWord"></div>
<ul>
<li v-for="fruit in filterFruitList" :key="fruit.id">{{fruit.name}}</li>
</ul>
</div>
</template>
为简单起见,HTML结构仅包含一个搜索框和一个列表。
3、实现
3.1 基于计算属性computed
实现
export default {
name: 'Computed',
data() {
return {
keyWord: '',
fruitList: [
{
"id": 1,
"name": '香蕉'
},
{
"id": 2,
"name": '水蜜桃'
},
{
"id": 3,
"name": '香瓜'
},
{
"id": 4,
"name": '西瓜'
},
{
"id": 5,
"name": '哈密瓜'
}
]
}
},
computed: {
filterFruitList() {
return this.fruitList.filter((item) => {
return item.name.indexOf(this.keyWord) !== -1;
})
}
}
}
</script>
computed
的实现方式很简洁,主要借助一个计算属性,在计算属性中通过搜索关键词过滤原始列表数据得到新的数据列表,并将新数据列表渲染到页面。
值得注意的地方:
abc.indexOf('a')
的返回值是0
,而abc.indexOf('')
的返回值也是0
。
因此,在一开始没有输入任何数据的时候,计算属性列表filterFruitList
中经过计算得到的数据和原始列表数据fruitList
是一样的。
3.2 基于侦听器watch
实现
<script>
export default {
name: 'Computed',
data() {
return {
keyWord: '',
fruitList: [
{
"id": 1,
"name": '香蕉'
},
{
"id": 2,
"name": '水蜜桃'
},
{
"id": 3,
"name": '香瓜'
},
{
"id": 4,
"name": '西瓜'
},
{
"id": 5,
"name": '哈密瓜'
}
],
filterFruitList: []
}
},
watch: {
keyWord: {
immediate: true,
handler(val) {
this.filterFruitList = this.fruitList.filter((item) => {
return item.name.indexOf(val) !== -1;
})
}
}
}
}
</script>
使用watch
实现需要注意的地方:
- 需要事先准备一个值为空的属性
filterFruitList
。 - 在
watch
实现中,keyWord
中详细配置immediate
的值要设置为true
,就相当于,在输入框首次没有输入任何数据时,立即执行一次,将filterFruitList
的值初始化为fruitList
中的值。
注意: 不论是computed
,还是watch
的实现方式,都没有对原始数据fruitList
进行修改或者破坏。这也是一个比较重要的点。
更多推荐
已为社区贡献1条内容
所有评论(0)