在css中使用vue的变量

原理

• 使用vue的动态行内样式，也就是 :style="{ '--color': color }"
• 动态绑定一个css变量 --color
• 在class中使用 var() 函数去使用这个变量

示例

使用示例

html

<div class="demo-text" :style="{ '--color': color }">杰夫贝佐斯</div>
<div @click="change">change</div>

js

const color = ref()
const change = () => {
  color.value = 'red'
}

css

.demo-text {
  color: var(--color);
}