vue 实现筛选功能

实现筛选功能的基本思路

在Vue中实现筛选功能通常涉及以下几个核心步骤：数据绑定、筛选逻辑处理、动态渲染结果。以下是具体实现方法。

数据准备与绑定

定义一个数组存储原始数据，另一个数组存储筛选后的结果。使用v-model绑定筛选条件输入框。

data() {
  return {
    items: [
      { id: 1, name: 'Apple', category: 'Fruit' },
      { id: 2, name: 'Carrot', category: 'Vegetable' },
      { id: 3, name: 'Banana', category: 'Fruit' }
    ],
    filteredItems: [],
    searchQuery: '',
    selectedCategory: ''
  }
}

计算属性实现动态筛选

利用Vue的计算属性（computed）自动响应输入变化，避免手动触发筛选。

computed: {
  filteredResults() {
    return this.items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(
        this.searchQuery.toLowerCase()
      );
      const matchesCategory = this.selectedCategory === '' || 
        item.category === this.selectedCategory;
      return matchesSearch && matchesCategory;
    });
  }
}

模板中的双向绑定

在模板中使用v-model绑定输入框，通过v-for渲染筛选结果。

<input 
  type="text" 
  v-model="searchQuery" 
  placeholder="Search by name"
>

<select v-model="selectedCategory">
  <option value="">All Categories</option>
  <option value="Fruit">Fruit</option>
  <option value="Vegetable">Vegetable</option>
</select>

<ul>
  <li v-for="item in filteredResults" :key="item.id">
    {{ item.name }} ({{ item.category }})
  </li>
</ul>

方法触发筛选（替代方案）

如果需要手动触发筛选（如点击按钮后执行），可使用方法配合事件。

methods: {
  applyFilters() {
    this.filteredItems = this.items.filter(item => {
      return item.name.toLowerCase().includes(
        this.searchQuery.toLowerCase()
      );
    });
  }
}

对应模板中添加按钮触发：

<button @click="applyFilters">Filter</button>

多条件筛选扩展

对于更复杂的多条件筛选，可通过扩展计算属性或方法实现。例如添加价格范围筛选：

computed: {
  filteredResults() {
    return this.items.filter(item => {
      const matchesPrice = item.price >= this.minPrice && 
        item.price <= this.maxPrice;
      return matchesPrice && /* 其他条件 */;
    });
  }
}

性能优化建议

对于大数据量场景：

• 使用debounce减少输入时的频繁计算
• 考虑分页或虚拟滚动（如vue-virtual-scroller）
• 复杂条件可结合Web Worker处理

完整示例代码

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <select v-model="selectedCategory">
      <option value="">All</option>
      <option v-for="cat in categories" :value="cat">{{ cat }}</option>
    </select>

    <ul>
      <li v-for="item in filteredResults" :key="item.id">
        {{ item.name }} - {{ item.category }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [/* 原始数据 */],
      searchQuery: '',
      selectedCategory: ''
    }
  },
  computed: {
    categories() {
      return [...new Set(this.items.map(item => item.category))];
    },
    filteredResults() {
      return this.items.filter(item => {
        return (
          item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) &&
          (this.selectedCategory === '' || item.category === this.selectedCategory)
        );
      });
    }
  }
}
</script>

以上方法覆盖了Vue中实现筛选功能的常见场景，可根据实际需求选择计算属性或方法触发的方式，并灵活扩展多条件筛选逻辑。