Home > WeChat Applet > Mini Program Development > WeChat Mini Program Tutorial Conditional Rendering

WeChat Mini Program Tutorial Conditional Rendering

黄舟
Release: 2017-01-16 15:06:44
Original
1664 people have browsed it

wx:if

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

True

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>
Copy after login

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 tag to wrap multiple components, and use wx:if control attributes on it.

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

Note: 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)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template