Small Program Foundation 11: Conditional rendering

1. Conditional Rendering Wx:if

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

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

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. If we want to judge multiple component labels at once, we can use a </block> to wrap multiple components and use wx:if on the block

<wx:if= "{{true}}">  <view> </ View >  < View > </ View > </ Block >

Note: <block/> not a component, it is just a wrapper element, does not make any rendering in the page, only accepts the control attribute.

Wx:if vs Hidden

Because templates in Wx:if can also contain data bindings, all when the WX:IF's conditional value is switched, the framework has a partial rendering process, because he ensures that conditions are quickly destroyed or re-rendered when switching.

At the same time Wx:if is also inert, if the initial render condition is false, the framework does nothing to start the partial rendering when the condition is first true.

In contrast hidden is much simpler, components are always rendered, but simple controls are displayed or hidden.

In general: Wx:if has higher switching consumption and hidden has higher initial rendering consumption. Therefore, if it is necessary to switch frequently, it would be better to use hidden and wx:if would be better if the conditions are not likely to change at runtime.

Small Program Foundation 11: Conditional rendering