vue 根据js的变量来设置css 里面的属性的属性值

1.通过动态绑定style，声明css变量"--fontColor"，把变量”fontColor”赋给“--fontColor”
2.在css中使用 var函数 读取“--fontColor”变量

点击查看代码

<template>
    <div class="wen_style" :style="{ '--fontColor': fontColor }">
        当前字体的颜色
    </div>
</template>
<script>
export default {
    data() {
        return {
            fontColor: "#ff00ff",
        };
    },
};
</script>
<style lang="less" scoped>
.wen_style {
    width: 180px;
    height: 80px;
    color: var(--fontColor);
}
</style>