template中
<span class="successOrError" :style="{'--fontColor':"green"}">成功</span>css中
<style lang="scss" scoped>
.successOrError {
font-size:14px;
color:var(--fontColor)
}
</style>结合computed使用的话
<template>
<div :style="cssVars">
<p class="text">测试文本</p>
</div>
</template>
<script>
export default {
data() {
return {
color: "red"
};
},
computed: {
cssVars() {
return {
"--color": this.color
};
}
}
};
</script>
<style lang="scss" scoped>
.text {
color: var(--color);
}
</style>
