vue实现条件筛选
实现条件筛选的基本思路
在Vue中实现条件筛选通常需要结合v-model、computed属性和方法，动态过滤数据列表。核心逻辑是通过用户输入或选择的条件，实时过滤原始数据并更新视图。
数据准备与绑定
定义原始数据数组和筛选条件变量：
data() {
return {
items: [
{ id: 1, name: 'Apple', category: 'fruit', price: 5 },
{ id: 2, name: 'Carrot', category: 'vegetable', price: 3 }
],
filters: {
searchQuery: '',
category: '',
maxPrice: null
}
}
}计算属性实现筛选
使用computed属性创建过滤后的列表：
computed: {
filteredItems() {
return this.items.filter(item => {
const matchesSearch = item.name.toLowerCase().includes(
this.filters.searchQuery.toLowerCase()
)
const matchesCategory = !this.filters.category ||
item.category === this.filters.category
const matchesPrice = !this.filters.maxPrice ||
item.price <= this.filters.maxPrice
return matchesSearch && matchesCategory && matchesPrice
})
}
}模板中的筛选控件
在模板中添加筛选输入控件并绑定到filters对象：
<input v-model="filters.searchQuery" placeholder="Search...">
<select v-model="filters.category">
<option value="">All Categories</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetable</option>
</select>
<input type="number" v-model="filters.maxPrice" placeholder="Max price">渲染过滤结果
使用计算属性展示过滤后的结果：
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }} - {{ item.category }} (${{ item.price }})
</li>
</ul>多条件筛选的优化
对于复杂筛选需求，可以拆分为独立的方法：
methods: {
checkSearchMatch(item) {
return item.name.toLowerCase().includes(
this.filters.searchQuery.toLowerCase()
)
},
checkCategoryMatch(item) {
return !this.filters.category || item.category === this.filters.category
}
}然后在计算属性中调用这些方法：
filteredItems() {
return this.items.filter(item =>
this.checkSearchMatch(item) &&
this.checkCategoryMatch(item) &&
(!this.filters.maxPrice || item.price <= this.filters.maxPrice)
)
}使用第三方库增强功能
对于更复杂的筛选需求，可以考虑使用lodash的_.filter或_.debounce实现性能优化：
import { debounce } from 'lodash'
methods: {
handleSearch: debounce(function() {
// 筛选逻辑
}, 300)
}
