vue 2.0 实现filterby
Vue 2.0 实现 filterBy 功能
Vue 2.0 移除了内置的 filterBy 过滤器，但可以通过计算属性或方法实现类似功能。以下是几种实现方式：
使用计算属性过滤数组
计算属性会根据依赖自动更新，适合对数组进行动态过滤。
new Vue({
el: '#app',
data: {
searchQuery: '',
items: [
{ name: 'Apple', category: 'fruit' },
{ name: 'Carrot', category: 'vegetable' },
{ name: 'Banana', category: 'fruit' }
]
},
computed: {
filteredItems() {
const query = this.searchQuery.toLowerCase()
return this.items.filter(item =>
item.name.toLowerCase().includes(query) ||
item.category.toLowerCase().includes(query)
)
}
}
})使用方法进行过滤
如果需要更灵活的过滤逻辑，可以在方法中实现：
methods: {
filterBy(items, query) {
if (!query) return items
query = query.toLowerCase()
return items.filter(item =>
item.name.toLowerCase().includes(query) ||
item.category.toLowerCase().includes(query)
)
}
}使用 Lodash 等工具库
对于复杂过滤需求，可以使用 Lodash 的 _.filter 或 _.debounce 实现性能优化：
import _ from 'lodash'
computed: {
filteredItems: _.debounce(function() {
const query = this.searchQuery.toLowerCase()
return this.items.filter(item =>
item.name.toLowerCase().includes(query)
)
}, 500)
}注册全局过滤器
虽然 Vue 2.x 不推荐过滤器用于复杂逻辑，但可以注册全局过滤器用于简单文本处理：
Vue.filter('filterBy', function(value, query) {
if (!query) return value
query = query.toLowerCase()
return value.filter(item =>
item.name.toLowerCase().includes(query)
)
})使用方式：
<div v-for="item in items | filterBy searchQuery">
{{ item.name }}
</div>注意事项
- 对于大型数据集，考虑使用分页或虚拟滚动优化性能
- 复杂过滤条件可以组合多个计算属性
- 服务端过滤可能更适合超大数据集
