当前位置：首页 > VUE

vue 实现筛选功能

2026-02-10 23:39:14VUE

实现筛选功能的基本思路

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

数据准备与绑定

在Vue组件的data或setup中定义原始数据和筛选条件。例如：

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

计算属性实现筛选

使用Vue的计算属性（computed）动态生成筛选后的数据，避免直接修改原始数据：

vue 实现筛选功能

computed: {
  filteredItems() {
    return this.items.filter(item => {
      const matchesText = item.name.toLowerCase().includes(this.filterText.toLowerCase());
      const matchesCategory = this.filterCategory ? 
        item.category === this.filterCategory : true;
      return matchesText && matchesCategory;
    });
  }
}

模板中的双向绑定

在模板中使用v-model绑定筛选条件，并渲染筛选结果：

<input v-model="filterText" placeholder="Search by name...">
<select v-model="filterCategory">
  <option value="">All Categories</option>
  <option value="Fruit">Fruit</option>
  <option value="Vegetable">Vegetable</option>
</select>

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

使用Vue 3的组合式API

在Vue 3中，可以使用setup和ref实现类似功能：

vue 实现筛选功能

import { ref, computed } from 'vue';

export default {
  setup() {
    const items = ref([...]); // 原始数据
    const filterText = ref('');
    const filterCategory = ref('');

    const filteredItems = computed(() => {
      return items.value.filter(item => {
        // 筛选逻辑同上
      });
    });

    return { filterText, filterCategory, filteredItems };
  }
}

性能优化建议

对于大型数据集，可以考虑以下优化：

使用debounce减少频繁触发筛选（例如通过lodash.debounce）
分页加载筛选结果
对原始数据建立索引或预处理

复杂筛选的实现

如果需要多条件组合筛选，可以扩展筛选逻辑：

computed: {
  filteredItems() {
    return this.items.filter(item => {
      return Object.entries(this.filters).every(([key, value]) => {
        if (!value) return true;
        return String(item[key]).toLowerCase().includes(String(value).toLowerCase());
      });
    });
  }
}

此时filters是一个包含多个筛选条件的对象。