uniapp中全局变量globalData以及class名的介绍和使用

使用uniapp开发时,可以通过在app.vue中定义全局变量,在没个页面内通过globalData获取

1、app.vue文件内部的写法

复制代码
<script>
    export default {
        globalData: {
            text: 'text'
        },
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style>
    /*每个页面公共css */
</style>
复制代码

2、在每个下级文件内的写法

onLoad() {
          var globalData = getApp().globalData.text; //获取全局变量
          getApp().globalData.text = 'abc'; //修改全局变量
          console.log(globalData);
          console.log(getApp().globalData.text);
        },

 3、需要注意的是,如果需要在app.vue中获取这个全局变量,需要按以下写法

onLaunch: function() {
            console.log(this.$scope.globalData.text)
            console.log('App Launch')
        },

class名的配置及使用:

复制代码
  <!-- 与vue相同,isActive为true时class=active,反之无 -->
  <view :class="{ active: isActive }">111</view>
  <!-- 对应的value值为true时class为键值,反之无 -->
  <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
  <!-- 数组内每一项的value值,对应为标签的class名 -->
  <view class="static" :class="[activeClass, errorClass]">333</view>
  <!-- 前面根据三目判断有无isActive这个class名,后面errorClass对应的value值为class名 -->
  <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
  <!-- 前面根据bool判断有无isActive这个class名,后面errorClass对应的value值为class名 -->
  <view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>
复制代码

 

posted @   Alex-Song  阅读(3428)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示