css中使用data中的变量

一、定义变量

data() {
  return {
    myColor:"#2a9efb",
  };
},

二、在templete中激活

说明：这里其实类似于设置 document.documentElement.style.setProperty('--myColor', myColor),而我们现在只是给div设置了变量属性，并且是在当前页面设置的，所以可以在style中直接通过动态样式的方式定义

<template>
  <div class="chat-message" :style="{'--myColor':myColor}">
    测试数据
  </div>
</template>

三、在css中使用

.chat-message {
    background: var(--myColor);
}