# Conditional rendering

# wx:if

In the framework, usewx: if = ""to determine whether the block needs to be rendered:

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

You can also add an else block withwx: elifandwx: else:

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

# block wx:if

Becausewx: ifis a control property, it needs to be added to a label.If you want to judge multiple component labels at once, you can use a 'tag to wrap multiple components together and use thewx: if' control property above.

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

Note: "is not a component. It is simply a wrapper element that does not render anything in the page and only accepts control attributes.

# wx:ifvshidden

Becausewx: ifThe template within it may also contain data bindings, so when thewx: ifconditional values switch, the framework has a local rendering process because it ensures that conditional blocks are destroyed or rerendered when they switch.

At the same timewx: ifis also inert , if the initial rendering condition isfalse, the framework does nothing and starts rendering locally when the condition first becomes true.

In contrast,hiddenis much simpler, components will always be rendered, just simple control display and hide.

In general,wx: ifhas a higher switching consumption andhiddenhas an higher initial rendering consumption.Therefore, in situations where frequent switching is required,hiddenis better, andwx: ifis best if conditions are unlikely to change at runtime.