当前位置：首页 > VUE

vue实现分类筛选

2026-03-29 10:58:04VUE

Vue实现分类筛选的方法

在Vue中实现分类筛选功能，可以通过多种方式实现。以下是几种常见的实现方法：

使用计算属性进行筛选

计算属性是Vue中实现数据筛选的常用方式。可以根据用户选择的分类条件，动态过滤数据列表。

vue实现分类筛选

<template>
  <div>
    <select v-model="selectedCategory">
      <option value="">所有分类</option>
      <option v-for="category in categories" :value="category">{{category}}</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 {
      selectedCategory: '',
      categories: ['电子产品', '服装', '食品'],
      items: [
        { id: 1, name: '手机', category: '电子产品' },
        { id: 2, name: 'T恤', category: '服装' },
        { id: 3, name: '面包', category: '食品' }
      ]
    }
  },
  computed: {
    filteredItems() {
      if (!this.selectedCategory) return this.items
      return this.items.filter(item => item.category === this.selectedCategory)
    }
  }
}
</script>

使用Vuex管理筛选状态

对于更复杂的应用，可以使用Vuex来管理筛选状态和数据。

// store.js
export default new Vuex.Store({
  state: {
    items: [...],
    filter: ''
  },
  getters: {
    filteredItems: state => {
      return state.filter 
        ? state.items.filter(item => item.category === state.filter)
        : state.items
    }
  },
  mutations: {
    setFilter(state, filter) {
      state.filter = filter
    }
  }
})

使用第三方库实现高级筛选

对于需要更复杂筛选功能的场景，可以考虑使用第三方库如lodash的_.filter方法。

vue实现分类筛选

import _ from 'lodash'

computed: {
  filteredItems() {
    return _.filter(this.items, item => {
      return this.selectedCategory ? item.category === this.selectedCategory : true
    })
  }
}

多条件筛选实现

当需要支持多个筛选条件时，可以扩展筛选逻辑。

data() {
  return {
    filters: {
      category: '',
      priceRange: ''
    }
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => {
      const matchCategory = !this.filters.category || item.category === this.filters.category
      const matchPrice = !this.filters.priceRange || 
        (item.price >= this.filters.priceRange[0] && item.price <= this.filters.priceRange[1])
      return matchCategory && matchPrice
    })
  }
}

使用自定义指令实现筛选

对于需要复用筛选逻辑的情况，可以创建自定义指令。

Vue.directive('filter', {
  bind(el, binding, vnode) {
    const filterFn = binding.value
    const items = vnode.context.items
    vnode.context.filteredItems = items.filter(filterFn)
  }
})

每种方法都有其适用场景，可以根据项目需求选择合适的实现方式。计算属性方式简单直接，适合基本筛选需求；Vuex方式适合大型应用状态管理；第三方库可以提供更丰富的筛选功能；多条件筛选则能满足复杂业务需求。

标签: vue