当前位置：首页 > VUE

vue实现分类筛选

2026-02-17 11:19:26VUE

Vue实现分类筛选的方法

在Vue中实现分类筛选功能通常涉及以下几个关键步骤：

数据准备

定义一个包含所有分类项的数组，以及一个包含所有可筛选数据的数组。例如：

data() {
  return {
    categories: ['全部', '电子产品', '服装', '食品'],
    selectedCategory: '全部',
    items: [
      { id: 1, name: '手机', category: '电子产品' },
      { id: 2, name: 'T恤', category: '服装' },
      { id: 3, name: '面包', category: '食品' }
    ]
  }
}

筛选逻辑实现

使用计算属性来实现筛选功能，根据用户选择的分类返回过滤后的数据：

vue实现分类筛选

computed: {
  filteredItems() {
    if (this.selectedCategory === '全部') {
      return this.items
    }
    return this.items.filter(item => item.category === this.selectedCategory)
  }
}

模板渲染

在模板中创建分类选择器和结果列表：

<template>
  <div>
    <div>
      <select v-model="selectedCategory">
        <option v-for="category in categories" :key="category" :value="category">
          {{ category }}
        </option>
      </select>
    </div>

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

高级筛选实现

对于更复杂的筛选需求，可以使用多条件筛选：

vue实现分类筛选

多条件数据定义

data() {
  return {
    filters: {
      category: '',
      priceRange: [0, 1000],
      inStock: false
    },
    products: [
      { id: 1, name: '手机', category: '电子产品', price: 999, stock: 10 },
      { id: 2, name: 'T恤', category: '服装', price: 59, stock: 0 }
    ]
  }
}

复杂筛选计算属性

computed: {
  filteredProducts() {
    return this.products.filter(product => {
      const matchesCategory = !this.filters.category || 
        product.category === this.filters.category
      const matchesPrice = product.price >= this.filters.priceRange[0] && 
        product.price <= this.filters.priceRange[1]
      const matchesStock = !this.filters.inStock || product.stock > 0

      return matchesCategory && matchesPrice && matchesStock
    })
  }
}

使用Vuex管理筛选状态

对于大型应用，可以使用Vuex集中管理筛选状态：

Vuex store定义

const store = new Vuex.Store({
  state: {
    filters: {
      category: '全部',
      searchQuery: ''
    },
    products: []
  },
  getters: {
    filteredProducts: state => {
      return state.products.filter(product => {
        const matchesCategory = state.filters.category === '全部' || 
          product.category === state.filters.category
        const matchesSearch = product.name.includes(state.filters.searchQuery)
        return matchesCategory && matchesSearch
      })
    }
  }
})

组件中使用

computed: {
  ...mapGetters(['filteredProducts']),
  categories() {
    return ['全部', ...new Set(this.$store.state.products.map(p => p.category))]
  }
}