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)
}