当前位置：首页 > VUE

vue实现分类

2026-01-12 11:30:00VUE

Vue 实现分类的方法

使用 v-for 和计算属性

在 Vue 中可以通过 v-for 指令和计算属性实现分类功能。假设有一个商品列表需要按类别分类展示：

data() {
  return {
    products: [
      { id: 1, name: '苹果', category: '水果' },
      { id: 2, name: '香蕉', category: '水果' },
      { id: 3, name: '胡萝卜', category: '蔬菜' }
    ]
  }
},
computed: {
  categorizedProducts() {
    const categories = {}
    this.products.forEach(product => {
      if (!categories[product.category]) {
        categories[product.category] = []
      }
      categories[product.category].push(product)
    })
    return categories
  }
}

模板部分：

<div v-for="(products, category) in categorizedProducts" :key="category">
  <h3>{{ category }}</h3>
  <ul>
    <li v-for="product in products" :key="product.id">
      {{ product.name }}
    </li>
  </ul>
</div>

使用组件化方式

对于更复杂的分类需求，可以创建可复用的分类组件：

vue实现分类

// CategoryComponent.vue
<template>
  <div>
    <h2>{{ title }}</h2>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ['title']
}
</script>

父组件中使用：

<category-component title="水果">
  <ul>
    <li v-for="product in fruitProducts" :key="product.id">
      {{ product.name }}
    </li>
  </ul>
</category-component>

动态分类筛选

结合 Vue 的响应式特性，可以实现动态分类筛选：

vue实现分类

data() {
  return {
    activeCategory: 'all',
    // ...其他数据
  }
},
computed: {
  filteredProducts() {
    if (this.activeCategory === 'all') {
      return this.products
    }
    return this.products.filter(
      product => product.category === this.activeCategory
    )
  }
}

模板中添加分类选择器：

<select v-model="activeCategory">
  <option value="all">全部</option>
  <option value="水果">水果</option>
  <option value="蔬菜">蔬菜</option>
</select>

使用 Vuex 管理分类状态

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

// store.js
state: {
  categories: ['水果', '蔬菜', '肉类'],
  currentCategory: 'all',
  products: []
},
mutations: {
  setCategory(state, category) {
    state.currentCategory = category
  }
},
getters: {
  filteredProducts: state => {
    if (state.currentCategory === 'all') {
      return state.products
    }
    return state.products.filter(
      product => product.category === state.currentCategory
    )
  }
}

组件中通过 mapGetters 和 mapMutations 使用：

import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['filteredProducts'])
  },
  methods: {
    ...mapMutations(['setCategory'])
  }
}

标签: vue