vue实现数据筛选
Vue 数据筛选实现方法
使用计算属性实现筛选
计算属性是Vue中实现数据筛选的高效方式，能够自动缓存结果，避免重复计算。
computed: {
filteredItems() {
return this.items.filter(item => {
return item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
})
}
}在模板中直接使用计算属性：
<div v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</div>使用methods方法实现筛选
当需要更复杂的筛选逻辑或需要传递参数时，可以使用methods方法。
methods: {
filterItems(searchTerm) {
return this.items.filter(item => {
return item.name.toLowerCase().includes(searchTerm.toLowerCase())
})
}
}结合v-model实现实时筛选
通过v-model绑定搜索框，实现输入时实时筛选。
<input v-model="searchTerm" placeholder="搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>多条件筛选实现
对于需要多个筛选条件的情况，可以扩展筛选逻辑。
computed: {
filteredItems() {
return this.items.filter(item => {
const nameMatch = item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
const categoryMatch = this.selectedCategory ? item.category === this.selectedCategory : true
return nameMatch && categoryMatch
})
}
}使用第三方库实现高级筛选
对于复杂筛选需求，可以考虑使用lodash等工具库。
import _ from 'lodash'
computed: {
filteredItems() {
return _.filter(this.items, item => {
return _.includes(item.name.toLowerCase(), this.searchTerm.toLowerCase())
})
}
}性能优化建议
对于大数据量筛选，考虑以下优化：
- 使用debounce延迟触发筛选
- 对数据进行分页处理
- 使用Web Worker处理复杂计算
data() {
return {
debouncedFilter: _.debounce(this.doFilter, 300)
}
},
methods: {
doFilter() {
// 实际筛选逻辑
}
}
