Vue3.0学习-第⼗五节，Vue3中如何在css中使⽤js的变量vue3中有⼀个⽅法，在css中使⽤js⾥定义的变量
此⽅法是使⽤data(){} 中定义的变量，使⽤setup(){}中的变量会报错，此种⽅法，还没出原因，欢迎评论提出
<template>
<div class="a-div">
vue3在css中使⽤js的变量
</div>
</template>
<script>
export default {
data() {
return {
color: "red",
font: {
size: "16px",
color: "green",
},
};
},
setup() {
},
};
</script>
<style  lang="scss" scoped>css变量
.a-div {
width: 200px;
height: 200px;
background: v-bind(color);
font-size: v-bind("font.size");
color: v-bind("lor");
}
</style>
使⽤setup(){}中的变量  使⽤defineComponent却可以  具体原因还在研究
<template>
<div class="a-div">
vue3在css中使⽤js的变量
</div>
<div class="b-div"></div>
</template>
<script>
import { defineComponent, ref } from "@vue/runtime-core";
export default defineComponent({
data() {
return {
color: "red",
font: {
size: "20px",
color: "green",
},
};
},
setup() {
let back = ref("#ddd999");
return {
back,
};
},
});
</script>
<style  lang="scss" scoped>
.a-div {
width: 200px;
height: 200px;
background: v-bind(color);
font-size: v-bind("font.size");
color: v-bind("lor");
}
.b-div {
width: 200px;
height: 200px;
background: v-bind(back);
}
</style>
欢迎指出问题的所在

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。