1. wx:if

In the framework, use 'wx:if=""' to determine if the block needs to be rendered:

<view wx:if="{{condition}}"> True </view>

You can also add an else block with 'wx:elif and 'wx:else':

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

2. block wx:if

Because 'wx:if' is a control property, it needs to be added to a label. If you want to determine multiple component labels at once, you can wrap multiple components with a single '' label and use 'wx:if' on top to control the properties.

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

Please note

'' is not a component, it is just a wrapper element, does not do any rendering in the page, and only accepts the control attributes.

Because templates in 'wx:if' may also contain data binding, the framework has a local rendering process when the conditional value of 'wx:if' is switched, as it ensures that the condition block is destroyed or re-rendered on the switch.

At the same time, 'wx:if' is also lazy, if the initial rendering condition is 'false', the framework does nothing, and only starts local rendering when the condition first becomes true.

In contrast, 'hidden' is much simpler, with components always being rendered, with simple controls on showing and hiding.

In general, 'wx:if' has a higher switching consumption and 'hidden' has a higher initial rendering consumption. Therefore, in scenarios where frequent switching is required, it is better to use 'hidden', and 'wx:if' is better if conditions are unlikely to change at runtime.