如何在app.vue页面 scss中,使用data中的变量?
下图中不能对
page进行样式设置如:page { background: #F8F8F8; }
这里我需要对page进行变量分析之后,动态设置一个颜色
![叶雨](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/16/55/78_avatar_mid.jpg?v=0)
叶雨
- 发布:2023-09-29 07:27
- 更新:2024-03-18 00:28
- 阅读:376
![喜欢技术的前端](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/62/23/57_avatar_mid.jpg?v=0)
喜欢技术的前端 - QQ---445849201
如果是v3 可以使用v-bind 修改样式
<template>
<view class="content bg">
dsd
<button @click="change">change</button>
</view>
</template>
<script>
export default {
data() {
return {
color:'red'
};
},
onReady() {
},
methods:{
change(){
this.color = 'blue'
}
}
};
</script>
<style scoped lang="scss">
.bg{
background-color: v-bind(color);
}
</style>
叶雨 (作者)
谢谢啊
2023-10-10 09:56
喜欢技术的前端
回复 叶雨: 不客气,(●'◡'●)
2023-10-10 10:03
叶雨 (作者)
回复 喜欢技术的前端: 确实可以用
我当前的期望:通过设置一个全局class动态样式,然后统一控制
比如:根据用户性别,统一设置背景。就是想在app.vue文件一次性引入。
目前来看,这种变量似乎不会穿透,就算是在普通页设置(不添加scope)也是不会向下一级传递样式,和静态的class样式不一样
2023-10-10 10:38
喜欢技术的前端
回复 叶雨: 可以试试这个 https://www.cnblogs.com/lovejielive/p/16981875.html
2023-10-10 14:41