Vue中如何结合CSS实现根据item优先级动态切换元素边框颜色

CSS本身提供了类switch的匹配能力，也可以结合Vue的动态绑定特性更便捷地实现需求，以下是3种可选方案：

方案1：原生CSS @switch 规则（实验性特性） #

这是CSS官方推出的类switch语法，属于CSS Conditional Rules Module Level 4规范的实验性特性，使用前需注意仅最新版Chrome、Edge浏览器支持，不建议生产环境使用。
使用步骤：

1. 给元素绑定自定义CSS变量存储priority值：

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

2. 编写CSS @switch逻辑：

@switch var(--priority) {
  /* 优先级为high时的样式 */
  @case 'high' {
    .item {
      border-color: #f5222d;
    }
  }
  /* 优先级为medium时的样式 */
  @case 'medium' {
    .item {
      border-color: #faad14;
    }
  }
  /* 优先级为low时的样式 */
  @case 'low' {
    .item {
      border-color: #52c41a;
    }
  }
  /* 未匹配到任意值时的默认样式 */
  @default {
    .item {
      border-color: #d9d9d9;
    }
  }
}

方案2：属性选择器实现类switch效果（全兼容） #

不需要使用实验性特性，所有主流浏览器都支持，实现逻辑如下：

1. 给元素添加自定义data属性存储priority值：

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

2. 通过属性选择器匹配不同priority值设置样式：

.item[data-priority="high"] {
  border-color: #f5222d;
}
.item[data-priority="medium"] {
  border-color: #faad14;
}
.item[data-priority="low"] {
  border-color: #52c41a;
}
/* 默认样式 */
.item {
  border-color: #d9d9d9;
}

方案3：结合Vue动态类实现（推荐，性能最优） #

更符合Vue开发习惯，样式匹配性能比属性选择器更高，实现逻辑如下：

1. 动态绑定priority值对应的类名：

<div 
  class="item"
  :class="[
    item.priority ? 'priority' : '',
    item.priority ? `priority-${item.priority}` : ''
  ]"
>

2. 编写对应类名的样式：

.priority-high {
  border-color: #f5222d;
}
.priority-medium {
  border-color: #faad14;
}
.priority-low {
  border-color: #52c41a;
}
/* 默认样式 */
.item {
  border-color: #d9d9d9;
}

内容的提问来源于stack exchange，提问作者RowanX