zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    JavaScript之事件委托
    js中的事件委托(事件代理)详解
    CentOS已经安装命令,但提示找不到
    在Linux下创建7种类型的文件
    python源码安装的包的卸载
    新建文件所属组设置
    FFmpeg基础
    微服务架构概念
    一台 Java 服务器可以跑多少个线程?
    「学习的真正作用」​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​写出我心(一百三十八)
  • 原文地址:https://www.cnblogs.com/Alex-Song/p/12512358.html
Copyright © 2011-2022 走看看