当前位置：首页 > VUE

vue实现分类

2026-01-07 08:34:36VUE

Vue实现分类功能的方法

使用v-for和计算属性

通过计算属性对数据进行分类处理，结合v-for渲染分类后的列表。示例代码：

vue实现分类

<template>
  <div>
    <div v-for="category in categories" :key="category">
      <h3>{{ category }}</h3>
      <ul>
        <li v-for="item in getItemsByCategory(category)" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', category: 'Fruit' },
        { id: 2, name: 'Carrot', category: 'Vegetable' }
      ]
    }
  },
  computed: {
    categories() {
      return [...new Set(this.items.map(item => item.category))]
    }
  },
  methods: {
    getItemsByCategory(category) {
      return this.items.filter(item => item.category === category)
    }
  }
}
</script>

使用动态组件

为每个分类创建独立组件，通过动态组件切换显示。适合分类结构复杂的情况：

vue实现分类

<template>
  <div>
    <button 
      v-for="category in categories" 
      :key="category"
      @click="currentCategory = category"
    >
      {{ category }}
    </button>
    <component :is="currentCategoryComponent" />
  </div>
</template>

<script>
import Fruit from './Fruit.vue'
import Vegetable from './Vegetable.vue'

export default {
  components: { Fruit, Vegetable },
  data() {
    return {
      currentCategory: 'Fruit',
      categories: ['Fruit', 'Vegetable']
    }
  },
  computed: {
    currentCategoryComponent() {
      return this.currentCategory
    }
  }
}
</script>

使用Vue Router实现分类路由

通过路由参数实现分类导航，适合需要URL共享的分类场景：

// router.js
{
  path: '/category/:type',
  component: CategoryPage
}

// CategoryPage.vue
<template>
  <div>
    <h2>{{ $route.params.type }}</h2>
    <div v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    filteredItems() {
      return this.items.filter(
        item => item.category === this.$route.params.type
      )
    }
  }
}
</script>

使用第三方库

对于复杂分类需求，可考虑使用Vue.Draggable实现可拖拽分类，或Vuex管理分类状态：

// 使用Vuex示例
export default {
  computed: {
    ...mapGetters(['groupedItems'])
  }
}

// store.js
getters: {
  groupedItems: state => {
    return state.items.reduce((acc, item) => {
      (acc[item.category] = acc[item.category] || []).push(item)
      return acc
    }, {})
  }
}