vue 模糊查询实现
实现 Vue 模糊查询的方法
使用计算属性实现模糊查询
在 Vue 中，可以通过计算属性结合 JavaScript 的 filter 和 includes 方法实现模糊查询。以下是一个示例代码：
<template>
<div>
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>使用第三方库实现更强大的搜索
对于更复杂的模糊搜索需求，可以使用 Fuse.js 等第三方库。以下是使用 Fuse.js 的示例：
import Fuse from 'fuse.js'
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
],
fuse: null
}
},
created() {
this.fuse = new Fuse(this.items, {
keys: ['name'],
threshold: 0.3
})
},
computed: {
filteredItems() {
return this.searchQuery
? this.fuse.search(this.searchQuery).map(result => result.item)
: this.items
}
}
}实现带有高亮显示的模糊查询
可以通过自定义过滤器或方法实现搜索关键词高亮：
methods: {
highlight(text) {
if (!this.searchQuery) return text
const regex = new RegExp(this.searchQuery, 'gi')
return text.replace(regex, match => `<span class="highlight">${match}</span>`)
}
}在模板中使用 v-html 绑定高亮结果：
<li v-for="item in filteredItems" :key="item.id">
<span v-html="highlight(item.name)"></span>
</li>注意事项
- 对于大型数据集，建议使用防抖技术优化性能
- 模糊查询对大小写敏感时，需统一转换为大写或小写
- 考虑添加空搜索结果的提示信息
- 在移动端使用时，注意输入框的 UX 设计
