vue 在style标签中使用变量

1、定义变量

export default {
  data() {
    return {
      // 背景y颜色
      backgroundColor: "#00f",
      // 字体颜色
      fontColor: "#f00",
    };
  },
};

2、在HTML中设置CSS使用的变量

<template>
  <div>
    <div class="box" :style="{ '--backgroundColor': backgroundColor, '--fontColor': fontColor }">
      内容
    </div>
  </div>
</template>

3、在style标签中使用变量

<style lang="scss" scoped>
.box {
  /** 使用var()获取变量，参数就是变量名 */
  background-color: var(--backgroundColor);
  color: var(--fontColor);
}
</style>