WeChat Mini Program Tutorial Conditional Rendering

wx:if

In MINA, we use wx:if="{{condition}}" to determine whether the code block needs to be rendered:

True

You can also use wx:elif and wx:else to add an else block:

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

block wx:if

Because wx:if is a control attribute, it needs to be added to a label. But if we want to judge multiple component tags at once, we can use a tag to wrap multiple components, and use wx:if control attributes on it.

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

Note: is not a component. It is just a wrapping element. It will not do any rendering on the page and only accepts control attributes.

wx:if vs hidden

Because the template in wx:if may also contain data binding, MINA has a partial rendering process when the conditional value of wx:if is switched. , as it will ensure that the conditional block is destroyed or re-rendered when switching.

At the same time, wx:if is also lazy. If the initial rendering condition is false, MINA does nothing and only starts partial rendering when the condition becomes true for the first time.

In contrast, hidden is much simpler. The component will always be rendered, and it is just a simple control of display and hiding.

Generally speaking, wx:if has higher switching cost and hidden has higher initial rendering cost. Therefore, if frequent switching is required, it is better to use hidden. If the conditions are unlikely to change during runtime, wx:if is better.

The above is the content of the conditional rendering of the WeChat applet tutorial. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!