当前位置：首页 > VUE

vue实现筛选器

2026-02-20 01:44:27VUE

实现筛选器的基本思路

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

模板中的筛选控件

在模板中添加输入控件绑定到筛选条件变量，使用v-model实现双向绑定。显示筛选结果使用v-for指令。

<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 {
    // ...其他数据
    minPrice: 0,
    maxPrice: 100
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => {
      // ...原有条件
      const inPriceRange = item.price >= this.minPrice && 
        item.price <= this.maxPrice
      return matchesText && matchesCategory && inPriceRange
    })
  }
}

性能优化建议

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

添加防抖处理搜索输入
使用虚拟滚动渲染长列表
对不变的数据使用Object.freeze
在服务器端实现分页和筛选

组件化封装

将筛选器封装为可复用组件，通过props接收数据，emit事件传递筛选变化。

vue实现筛选器

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

标签: vue