- 定义变量(这里也可以是计算属性)
data() {
return {
myColor:"#409eff",
};
},
- template 中引入(必须,否则scss中无法使用,可以理解为“变量激活”)
<template>
<div class="chat-message" :style="{'--myColor':myColor}">
你好
</div>
</template>
- css中使用
.chat-message {
background: var(--myColor);
}