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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM