vue如何实现分类渲染

Vue 实现分类渲染的方法

使用 v-if 和 v-for 结合

通过 v-if 和 v-for 的组合可以实现分类渲染。注意 Vue 2.x 中 v-if 和 v-for 不能直接用于同一元素，需要嵌套使用。

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

使用计算属性分类数据

通过计算属性将数据按分类预先分组，渲染时直接遍历分组数据。

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

<script>
export default {
  data() {
    return {
      categories: [
        { id: 1, name: '分类1' },
        { id: 2, name: '分类2' }
      ],
      items: [
        { id: 1, name: '项目1', categoryId: 1 },
        { id: 2, name: '项目2', categoryId: 2 }
      ]
    }
  },
  computed: {
    categorizedItems() {
      return this.categories.map(category => ({
        ...category,
        items: this.items.filter(item => item.categoryId === category.id)
      }))
    }
  }
}
</script>

使用嵌套组件

将分类和项目分别封装为独立组件，提高复用性和可维护性。

<template>
  <div>
    <category-item 
      v-for="category in categories" 
      :key="category.id" 
      :category="category"
      :items="items"
    />
  </div>
</template>

<script>
import CategoryItem from './CategoryItem.vue'

export default {
  components: { CategoryItem },
  data() {
    return {
      categories: [
        { id: 1, name: '分类1' },
        { id: 2, name: '分类2' }
      ],
      items: [
        { id: 1, name: '项目1', categoryId: 1 },
        { id: 2, name: '项目2', categoryId: 2 }
      ]
    }
  }
}
</script>

使用 Vue 3 的 <script setup>

Vue 3 的 Composition API 提供了更灵活的数据处理方式。

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

<script setup>
import { ref, computed } from 'vue'

const categories = ref([
  { id: 1, name: '分类1' },
  { id: 2, name: '分类2' }
])

const items = ref([
  { id: 1, name: '项目1', categoryId: 1 },
  { id: 2, name: '项目2', categoryId: 2 }
])

const getItemsByCategory = (categoryId) => {
  return items.value.filter(item => item.categoryId === categoryId)
}
</script>

使用第三方库

对于复杂分类需求，可以考虑使用 lodash.groupBy 等工具库简化数据处理。

<template>
  <div>
    <div v-for="(items, categoryName) in groupedItems" :key="categoryName">
      <h3>{{ categoryName }}</h3>
      <ul>
        <li v-for="item in items" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { groupBy } from 'lodash'

export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1', category: '分类1' },
        { id: 2, name: '项目2', category: '分类2' }
      ]
    }
  },
  computed: {
    groupedItems() {
      return groupBy(this.items, 'category')
    }
  }
}
</script>