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:

a16dcdd4825a0cc87ae071d5398f945d True de5f4c1163741e920c998275338d29b2

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 2b5957c2850173214f4ea7f1261e9a0f 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: 2b5957c2850173214f4ea7f1261e9a0f 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 (www.php.cn)!