当前位置：首页 > VUE

vue实现条件分类

2026-02-20 02:31:41VUE

实现条件分类的方法

在Vue中实现条件分类通常涉及使用v-if、v-else-if、v-else等指令，或通过计算属性动态分类数据。以下是几种常见场景的实现方式：

vue实现条件分类

使用指令进行条件渲染

<template>
  <div>
    <p v-if="type === 'A'">分类A的内容</p>
    <p v-else-if="type === 'B'">分类B的内容</p>
    <p v-else>其他分类的内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'A' // 可动态修改
    }
  }
}
</script>

计算属性动态分类

<template>
  <div>
    <p v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '苹果', category: '水果' },
        { id: 2, name: '香蕉', category: '水果' },
        { id: 3, name: '胡萝卜', category: '蔬菜' }
      ],
      activeCategory: '水果'
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.category === this.activeCategory)
    }
  }
}
</script>

动态组件分类

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">切换分类</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' 
        ? 'ComponentB' 
        : 'ComponentA'
    }
  }
}
</script>

分类列表渲染

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '苹果', category: '水果' },
        { id: 2, name: '香蕉', category: '水果' },
        { id: 3, name: '胡萝卜', category: '蔬菜' }
      ],
      categories: ['水果', '蔬菜']
    }
  },
  methods: {
    itemsByCategory(category) {
      return this.items.filter(item => item.category === category)
    }
  }
}
</script>