vue filter实现搜索
实现搜索功能的 Vue Filter
在 Vue 中可以通过自定义过滤器（filter）来实现搜索功能。以下是几种常见的实现方式：
使用计算属性实现搜索
计算属性是更推荐的方式，因为它能更好地利用 Vue 的响应式系统：
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}注册全局过滤器
可以在全局注册一个搜索过滤器：
Vue.filter('search', function(items, searchQuery) {
if (!searchQuery) return items
return items.filter(item =>
item.name.toLowerCase().includes(searchQuery.toLowerCase())
)
})使用方式：
<div v-for="item in items | search(searchQuery)">
{{ item.name }}
</div>局部过滤器实现
在组件内部定义过滤器：
filters: {
search(items, searchQuery) {
if (!searchQuery) return items
return items.filter(item =>
item.title.toLowerCase().includes(searchQuery.toLowerCase())
)
}
}模板中使用：
<ul>
<li v-for="item in items | search(searchQuery)">
{{ item.title }}
</li>
</ul>多字段搜索实现
扩展过滤器支持多字段搜索：
Vue.filter('search', function(items, searchQuery, fields) {
if (!searchQuery) return items
return items.filter(item => {
return fields.some(field =>
String(item[field]).toLowerCase().includes(searchQuery.toLowerCase())
)
})
})使用方式：
<div v-for="item in items | search(searchQuery, ['name', 'description'])">
{{ item.name }}
</div>性能优化建议
对于大型数据集，考虑以下优化：
- 使用防抖技术减少频繁过滤
- 预先处理数据（如小写转换）
- 使用 Web Worker 进行后台处理
- 考虑分页加载结果
注意：Vue 3 已移除过滤器的概念，推荐使用方法或计算属性实现类似功能。
