Vue中如何动态更新类对应伪元素的background-color属性

方案1：CSS属性选择器实现（适配你的固定匹配需求） #

你已经为ribbon元素绑定了data-content自定义属性，直接通过CSS属性选择器匹配不同属性值，设置对应伪元素背景色即可，无需修改现有JS逻辑：

/* 原有SCSS代码不变，新增以下规则 */
.ribbon[data-content="1"]::before {
  background: gold;
}
.ribbon[data-content="2"]::before {
  background: gray;
}
/* 后续新增content值对应的颜色配置，按相同格式往下追加即可 */

方案2：CSS变量动态传值（适合更灵活的场景） #

如果后续颜色需要动态配置（比如从接口返回、支持用户自定义），可以用CSS变量实现：

1. 修改HTML模板，给ribbon元素动态绑定CSS变量：

<span 
  class="ribbon zindex-2" 
  :data-content="content"
  :style="`--ribbon-bg: ${getContentBg(content)}`"
/>

2. 在Vue的methods/computed中新增颜色匹配逻辑：

// 示例逻辑，可根据实际需求调整
const getContentBg = (content) => {
  const colorMap = {
    '1': 'gold',
    '2': 'gray',
    // 新增值直接在映射表里加即可
  }
  return colorMap[content] || 'red' // 默认色兜底
}

3. 修改SCSS中伪元素的背景色配置，引用变量：

.ribbon::before {
  /* 其余原有属性保持不变 */
  background: var(--ribbon-bg, red); /* 第二个参数为默认兜底色 */
}

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