当前位置：首页 > VUE

vue 实现筛选功能

2026-01-14 06:50:35VUE

实现筛选功能的基本思路

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

数据准备与绑定

准备一个包含所有数据的数组，并使用v-model或v-for将数据绑定到模板中。例如：

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

实现输入筛选

通过输入框动态筛选数据，使用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
    })
  }
}

在模板中添加输入框绑定filterText：

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

展示筛选结果

使用v-for展示筛选后的结果：

vue 实现筛选功能

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

多条件筛选扩展

如果需要更复杂的多条件筛选，可以扩展筛选逻辑。例如添加价格范围筛选：

data() {
  return {
    priceRange: [0, 100]
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => {
      // 原有逻辑
      const matchesPrice = item.price >= this.priceRange[0] && item.price <= this.priceRange[1]
      return matchesText && matchesCategory && matchesPrice
    })
  }
}

性能优化建议

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

使用debounce处理输入框的频繁输入
对数据进行分页处理
使用Web Worker处理复杂的筛选逻辑
考虑使用虚拟滚动技术

完整示例代码

<template>
  <div>
    <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', category: 'Fruit' },
        { id: 2, name: 'Carrot', category: 'Vegetable' },
        { id: 3, name: 'Banana', category: 'Fruit' }
      ],
      filterText: '',
      filterCategory: ''
    }
  },
  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
      })
    }
  }
}
</script>

以上方法提供了Vue中实现筛选功能的基本框架，可以根据实际需求进行扩展和调整。