【微信小程序】 wx:if 與 hidden(隱藏元素)區別

wx:if 與 hidden 都可以控制微信小程序中元素的顯示與否。

 

區別：

wx:if 是遇 true 顯示，hidden 是遇 false 顯示。

wx:if 在隱藏的時候不渲染，而 hidden 在隱藏時仍然渲染，只是不呈現。

所以如果頻繁切換的話，用 wx:if 將會消耗更多資源，因為每次呈現的時候他都會渲染，每次隱藏的時候，他都會銷毀。

如果切換並不頻繁的話，用 wx:if 相對來說較好些，因為它會避免初始就一下渲染那么多。

wxml:

<view>
  <text>pages/testmodule/testmodule.wxml</text>
  <view wx:if="{{showif}}">wx:if測試</view>
  <view hidden='{{showhidden}}'>hidden顯示隱藏測試</view>
  <button bindtap='handleIf'>改變if</button>
  <button bindtap='handleHidden'>改變hidden</button>
</view>

js:

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    showif: true,
    showhidden: false
  },

  handleIf(){
    this.setData({
      showif: !this.data.showif
    });
  },
  handleHidden(){
    this.setData({
      showhidden: !this.data.showhidden
    });
  }
)}

 

官網文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html