叶雨
叶雨
  • 发布:2023-09-29 07:27
  • 更新:2024-03-18 00:28
  • 阅读:304

app.vue页面 scss中,使用data中的变量

分类:uni-app

如何在app.vue页面 scss中,使用data中的变量?
下图中不能对
page进行样式设置如:page { background: #F8F8F8; }
这里我需要对page进行变量分析之后,动态设置一个颜色

2023-09-29 07:27 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - 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

小小菜76055421

小小菜76055421

编译到微信小程序上不起作用呀

要回复问题请先登录注册