vue模糊查询实现
实现Vue模糊查询的方法
使用计算属性实现模糊查询
在Vue中，可以利用计算属性结合数组的filter方法实现模糊查询功能。计算属性会根据依赖的数据自动更新结果。
<template>
<div>
<input v-model="searchText" placeholder="输入关键词搜索">
<ul>
<li v-for="item in filteredList" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
originalList: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
]
}
},
computed: {
filteredList() {
return this.originalList.filter(item =>
item.name.includes(this.searchText)
)
}
}
}
</script>使用自定义方法实现模糊查询
对于更复杂的模糊查询需求，可以创建自定义方法来实现，支持大小写不敏感或正则表达式匹配。
methods: {
fuzzySearch(list, keyword) {
if (!keyword) return list
const reg = new RegExp(keyword, 'i')
return list.filter(item => reg.test(item.name))
}
}结合lodash实现防抖搜索
当需要优化性能，避免频繁触发搜索时，可以使用lodash的debounce方法实现防抖功能。
import { debounce } from 'lodash'
export default {
data() {
return {
searchText: '',
filteredList: [],
originalList: [...]
}
},
watch: {
searchText: debounce(function(newVal) {
this.filteredList = this.originalList.filter(item =>
item.name.toLowerCase().includes(newVal.toLowerCase())
)
}, 300)
}
}使用第三方库实现高级模糊查询
对于更复杂的模糊匹配需求，可以考虑使用Fuse.js等专门用于模糊搜索的库。
import Fuse from 'fuse.js'
export default {
data() {
return {
fuse: null,
searchText: '',
originalList: [...]
}
},
created() {
this.fuse = new Fuse(this.originalList, {
keys: ['name'],
threshold: 0.4
})
},
computed: {
filteredList() {
return this.searchText
? this.fuse.search(this.searchText).map(r => r.item)
: this.originalList
}
}
}服务器端模糊查询实现
当数据量较大时，建议将模糊查询逻辑放在服务器端，通过API接口获取结果。
methods: {
async searchItems() {
try {
const response = await axios.get('/api/items', {
params: { q: this.searchText }
})
this.filteredList = response.data
} catch (error) {
console.error(error)
}
}
}以上方法可以根据实际需求选择或组合使用，计算属性方式适合客户端小型数据集，服务器端查询适合大型数据集，第三方库则提供更丰富的模糊匹配算法。
