Vue项目 - css 使用 js 变量值

做项目时遇到以下问题：

组件中需要使用变量的值作为某元素的背景颜色，但 style 标签中无法直接使用变量值作为样式

解决方法如下

• 为需要设置变量的元素样式做如下设置（使用）

background-color: var(--theme-color);

–theme-color为此处的自定义名称

• 包裹该元素的任意元素标签做以下设置（定义）

<div class="content" :style="{ '--theme-color': themeColor }">
...
</div>

themeColor 为 script 标签中设置的变量

完成

方法参考 MDN 相关文档： https://developer.mozilla.org/zh-CN/docs/Web/CSS/var()