当前位置：首页 > VUE

vue怎么实现筛选功能

2026-02-23 09:12:58VUE

实现筛选功能的基本思路

在Vue中实现筛选功能通常涉及数据绑定、计算属性和方法的使用。通过监听用户输入或选择，动态过滤数据列表并更新视图。

数据准备

准备一个数据数组和一个用于存储筛选条件的变量。数据数组包含需要筛选的项，筛选条件可以是用户输入的文本或选择的值。

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

模板中的双向绑定

在模板中使用v-model绑定筛选条件到输入框或下拉菜单。展示过滤后的数据列表使用v-for指令。

vue怎么实现筛选功能

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

方法过滤替代计算属性

如果筛选逻辑较复杂或需要手动触发，可以使用方法代替计算属性。定义一个方法并在需要时调用它。

methods: {
  filterItems() {
    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
    })
  }
}

在模板中调用该方法：

vue怎么实现筛选功能

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

动态筛选选项

如果需要根据数据动态生成筛选选项（如分类列表），可以使用计算属性提取唯一值。

computed: {
  categories() {
    return [...new Set(this.items.map(item => item.category))]
  }
}

在模板中动态生成下拉选项：

<select v-model="filterCategory">
  <option value="">All Categories</option>
  <option v-for="category in categories" :value="category" :key="category">
    {{ category }}
  </option>
</select>

使用第三方库

对于更复杂的筛选需求，可以考虑使用第三方库如lodash的_.filter或_.debounce实现防抖筛选。

import { debounce } from 'lodash'

methods: {
  handleFilter: debounce(function() {
    this.filtered = this.items.filter(item => 
      item.name.includes(this.filterText)
    )
  }, 300)
}