当前位置：首页 > VUE

vue实现筛选器

2026-01-19 09:21:32VUE

实现筛选器的基本思路

在Vue中实现筛选器通常涉及数据绑定、计算属性和事件处理。筛选器的核心是根据用户输入动态过滤数据列表。

数据准备与绑定

创建Vue实例时定义原始数据数组和筛选条件变量。数据数组包含待筛选的项目，筛选条件变量存储用户输入的筛选值。

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
      return matchesText && matchesCategory
    })
  }
}

模板中的筛选控件

在模板中添加输入控件绑定到筛选条件变量，并显示筛选结果。

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

多条件筛选扩展

对于更复杂的筛选需求，可以扩展筛选逻辑。添加更多筛选条件变量并在计算属性中组合它们。

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

性能优化技巧

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

使用防抖处理快速变化的输入
对不常变化的数据进行预计算
虚拟滚动技术只渲染可见项
Web Worker处理密集型计算

组件化筛选器

将筛选器封装为可重用组件，通过props接收数据，通过events发射筛选变化。

vue实现筛选器

Vue.component('item-filter', {
  props: ['items'],
  data() {
    return {
      localFilter: ''
    }
  },
  computed: {
    filteredItems() {
      // 筛选逻辑
    }
  },
  template: `
    <div>
      <input v-model="localFilter">
      <slot :filteredItems="filteredItems"></slot>
    </div>
  `
})

标签: vue