vue实现条件筛选
条件筛选的实现方法
在Vue中实现条件筛选通常涉及数据绑定、计算属性和方法调用。以下是几种常见的实现方式：
使用计算属性进行筛选
计算属性是Vue中实现条件筛选最简洁的方式：
computed: {
filteredItems() {
return this.items.filter(item => {
return (
(this.filter.category === '' || item.category === this.filter.category) &&
(this.filter.price === '' || item.price <= this.filter.price)
)
})
}
}基于v-model的双向绑定
通过v-model绑定筛选条件到表单元素：
<input v-model="filter.keyword" placeholder="搜索关键词">
<select v-model="filter.category">
<option value="">所有分类</option>
<option value="electronics">电子产品</option>
</select>方法触发式筛选
当需要更复杂的筛选逻辑或异步操作时，可以使用方法：
methods: {
applyFilters() {
this.filteredItems = this.items.filter(item => {
// 复杂筛选逻辑
})
}
}使用watch监听筛选条件变化
当筛选条件变化时需要执行额外操作：
watch: {
'filter.keyword'(newVal) {
this.debouncedFilter()
}
}性能优化技巧
对于大型数据集，筛选操作可能影响性能，可考虑以下优化：
分页加载
computed: {
paginatedItems() {
const start = (this.currentPage - 1) * this.pageSize
return this.filteredItems.slice(start, start + this.pageSize)
}
}防抖处理
created() {
this.debouncedFilter = _.debounce(this.applyFilters, 500)
}虚拟滚动
对于超长列表，可使用vue-virtual-scroller等库实现虚拟滚动。
完整示例代码
<template>
<div>
<input v-model="filter.text" placeholder="搜索">
<select v-model="filter.category">
<option value="">所有分类</option>
<option v-for="cat in categories" :value="cat">{{cat}}</option>
</select>
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }} - {{ item.price }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [...],
filter: {
text: '',
category: ''
}
}
},
computed: {
filteredItems() {
return this.items.filter(item => {
const matchesText = item.name.includes(this.filter.text)
const matchesCategory = !this.filter.category ||
item.category === this.filter.category
return matchesText && matchesCategory
})
}
}
}
</script>以上方法可根据具体需求组合使用，计算属性适合简单同步筛选，方法调用适合复杂或异步操作，watch适合需要响应式处理的场景。
