当前位置：首页 > VUE

vue实现分类

2026-03-27 09:42:33VUE

Vue实现分类功能

分类功能在Web应用中很常见，可以通过Vue的动态组件、条件渲染或路由等方式实现。以下是几种常见方法：

基于v-if的条件渲染 通过v-if或v-show根据当前分类显示不同内容：

<template>
  <div>
    <button @click="currentCategory = 'food'">食品</button>
    <button @click="currentCategory = 'clothes'">服装</button>

    <div v-if="currentCategory === 'food'">
      <!-- 食品分类内容 -->
    </div>

    <div v-if="currentCategory === 'clothes'">
      <!-- 服装分类内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 'food'
    }
  }
}
</script>

使用动态组件 通过component标签动态加载不同分类组件：

<template>
  <div>
    <button @click="currentComponent = 'FoodCategory'">食品</button>
    <button @click="currentComponent = 'ClothesCategory'">服装</button>

    <component :is="currentComponent" />
  </div>
</template>

<script>
import FoodCategory from './FoodCategory.vue'
import ClothesCategory from './ClothesCategory.vue'

export default {
  components: { FoodCategory, ClothesCategory },
  data() {
    return {
      currentComponent: 'FoodCategory'
    }
  }
}
</script>

基于路由的分类 在Vue Router中设置分类路由：

const routes = [
  {
    path: '/category/:type',
    component: CategoryPage,
    props: true
  }
]

分类数据过滤 对列表数据进行分类筛选：

vue实现分类

computed: {
  filteredItems() {
    return this.items.filter(item => 
      this.selectedCategory === 'all' || 
      item.category === this.selectedCategory
    )
  }
}

分类组件设计建议

分类数据结构 典型分类数据格式：

categories: [
  {
    id: 1,
    name: '电子产品',
    subCategories: [
      { id: 11, name: '手机' },
      { id: 12, name: '电脑' }
    ]
  }
]

多级分类实现 使用递归组件实现无限级分类：

<template>
  <ul>
    <li v-for="category in categories" :key="category.id">
      {{ category.name }}
      <category-tree 
        v-if="category.subCategories" 
        :categories="category.subCategories"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CategoryTree',
  props: ['categories']
}
</script>

分类状态管理

对于复杂应用，建议使用Vuex管理分类状态：

vue实现分类

// store.js
export default new Vuex.Store({
  state: {
    currentCategory: null,
    categories: []
  },
  mutations: {
    SET_CATEGORY(state, category) {
      state.currentCategory = category
    }
  }
})