css 切换语句答案

【问题标题】：Css switch statementcss 切换语句
【发布时间】：2021-10-13 20:40:00
【问题描述】：

所以，我目前在 vue 中有这样的东西：

  <div class="item" :class="{ priority: item.priority }">

我想要做的是能够根据项目的优先级更改我的边框颜色，所以如果 CSS 中有类似 switch 语句的东西可以让我实现这一点？

【问题讨论】：

创建一个计算属性，将其指定为样式或类？

标签： css vue.js css-selectors

【解决方案1】：

CSS 中没有 switch 语句，但您可以在 JavaScript 中执行此操作，并使用 class binding 将其应用于 div。

例如，使用基于优先级的getClass() 方法：

<template>
  <div class="item-list" v-for="item in items">
    <div class="item" :class="getClass(item.priority)">...</div>
  </div>
</template>

<script>
export default {
  ⋮
  methods: {
    getClass(priority) {
      switch (priority) {
        case 1: return 'high-priority'
        case 2: return 'medium-priority'
        default: return 'low-priority'
      }
    }
  },
}
</script>

<style scoped>
.high-priority {
  border-color: red;
}
.medium-priority {
  border-color: orange;
}
.low-priority {
  border-color: gray;
}
</style>

demo 1

或者对于improved rendering performance、compute，一个包含class 属性的新项目列表，该属性的值是getClass() 的结果：

<template>                                   ?
  <div class="item-list" v-for="item in computedItems">
    <div class="item" :class="item.class">...</div>
  </div>                             ?
</template>

<script>
export default {
  ⋮
  computed: { ?
    computedItems() {
      return this.items.map(item => ({
        ...item,
        class: this.getClass(item.priority),
      })) ?
    }
  }
}
</script>

demo 2

【讨论】：