vue实现条件分类

Vue 实现条件分类的方法

在 Vue 中实现条件分类通常涉及使用 v-if、v-else-if、v-else 或 v-show 指令，结合计算属性或方法动态判断条件。以下是几种常见的实现方式：

使用 v-if 系列指令

通过 v-if、v-else-if 和 v-else 实现多条件分类渲染：

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 80">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 85
    }
  }
}
</script>

使用计算属性分类

通过计算属性返回分类结果，简化模板逻辑：

<template>
  <div>
    <p>{{ grade }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 75
    }
  },
  computed: {
    grade() {
      if (this.score >= 90) return '优秀'
      if (this.score >= 80) return '良好'
      if (this.score >= 60) return '及格'
      return '不及格'
    }
  }
}
</script>

动态绑定类名或样式

根据条件动态切换类名或样式：

<template>
  <div :class="statusClass">{{ statusText }}</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  },
  computed: {
    statusClass() {
      return {
        'active': this.isActive,
        'inactive': !this.isActive
      }
    },
    statusText() {
      return this.isActive ? '启用' : '禁用'
    }
  }
}
</script>

结合 v-for 和条件筛选

通过计算属性过滤列表数据，实现分类展示：

<template>
  <div>
    <h3>已完成任务</h3>
    <ul>
      <li v-for="item in completedTasks" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <h3>未完成任务</h3>
    <ul>
      <li v-for="item in pendingTasks" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, name: '任务A', completed: true },
        { id: 2, name: '任务B', completed: false }
      ]
    }
  },
  computed: {
    completedTasks() {
      return this.tasks.filter(task => task.completed)
    },
    pendingTasks() {
      return this.tasks.filter(task => !task.completed)
    }
  }
}
</script>

使用 v-show 控制显示

适合频繁切换显示状态的场景：

<template>
  <div>
    <p v-show="isAdmin">管理员功能</p>
    <p v-show="!isAdmin">普通用户功能</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: false
    }
  }
}
</script>