实现模糊查询vue
实现模糊查询的方法
在Vue中实现模糊查询通常需要结合输入框和列表渲染功能，利用JavaScript的字符串方法或正则表达式进行匹配。以下是几种常见的方法：
使用v-model和filter方法
通过v-model绑定输入框的值，利用数组的filter方法筛选匹配项。
<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: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>使用正则表达式增强模糊匹配
如果需要更灵活的模糊匹配，可以使用正则表达式。
computed: {
filteredItems() {
const query = this.searchQuery.toLowerCase()
return this.items.filter(item => {
const regex = new RegExp(query.split('').join('.*'), 'i')
return regex.test(item.name)
})
}
}使用第三方库实现高级模糊搜索
对于更复杂的模糊搜索需求，可以使用Fuse.js等专门库。
import Fuse from 'fuse.js'
export default {
data() {
return {
searchQuery: '',
items: [...],
fuse: null
}
},
created() {
this.fuse = new Fuse(this.items, {
keys: ['name'],
includeScore: true
})
},
computed: {
filteredItems() {
if (!this.searchQuery) return this.items
return this.fuse.search(this.searchQuery).map(result => result.item)
}
}
}添加防抖优化性能
频繁的搜索输入可能影响性能，可以添加防抖功能。
import { debounce } from 'lodash'
export default {
data() {
return {
searchQuery: '',
debouncedSearch: ''
}
},
watch: {
searchQuery: debounce(function(newVal) {
this.debouncedSearch = newVal
}, 300)
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.debouncedSearch.toLowerCase())
)
}
}
}以上方法可以根据具体需求选择使用，从简单到复杂提供了多种实现模糊查询的解决方案。
