小程序-wx:if 与 hidden

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

区别：

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

wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。

所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。

如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。

使用方式

<view class="bottom_in" data-type="2" bindtap="ispraise">
  <image class="img" wx:if="{{is_collection}}" src="../../img/my/icon1-2.png"></image>
  <image class="img" vwx:else src="../../img/my/icon1.png"></image>
</view>

<view class="bottom_in" hidden='{{show_nav}}'>

</view>

js

Page({
  data: {
    show_nav:true,
    is_collection:false
  }
})