Css 切换语句

Question

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

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

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

Answer 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

Css 切换语句

Css switch statement

css

css-selectors

vue.js