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>
  • 相关阅读:
    手机访问PC网站自动跳转到手机网站代码(转)
    ecshop其他页面判断是智能手机访问也跳转到ECTouch对应手机版页面(转)
    AJAX
    基于ThinkPHP的开发笔记3-登录功能(转)
    php MySQL使用rand函数随机取记录(转)
    【面试】宝马
    【面试】体会
    【Oracle】ORACLE SQL Developer不支持JAVA版本
    【JavaScript】JS跨域设置和取Cookie
    【Oracle】windows默认共享的打开和关闭?
  • 原文地址:https://www.cnblogs.com/Alex-Song/p/12512358.html
Copyright © 2011-2022 走看看