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>