Detailed explanation of conditional rendering in mini program development

wx:if

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

<view wx:if="{{condition}}"> True </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 It is a controlattribute that 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, so when wx:if When the condition value switches, the framework has a local rendering process, because it will ensure that the condition block is destroyed or re-rendered when switching.

At the same time, wx:if is also lazy. If the initial rendering condition is false, the framework does nothing and 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.

[Related recommendations]

1. Complete source code download of WeChat mini program

2. WeChat mini program demo: carousel image transformation

3. WeChat mini program game demo select different color blocks

The above is the detailed content of Detailed explanation of conditional rendering in mini program development. For more information, please follow other related articles on the PHP Chinese website!