wx:if
In MINA, we use wx:if="{{condition}}" to determine whether the code block needs to be rendered:
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
<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>
Note:
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)!