a:if
Use a:if="{{condition}}"
to determine whether the code block needs to be rendered in the framework.
<view a:if="{{condition}}"> True </view>
You can also use a:elif
and a:else
to add a else block.
<view a:if="{{length > 5}}"> 1 </view>
<view a:elif="{{length > 2}}"> 2 </view>
<view a:else> 3 </view>
block a:if
a:if
is a controlled attribute, therefore, you need to use this attribute in tags. If you want to determine multiple component tags at once, you can wrap multiple components <block/>
tags and use a:if
to control attributes.
<block a:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
Note:
<block/>
is not a component but just a wrapper element. This element does not do rendering on the page and only accepts controlled attributes.Compare a:if with hidden
- Templates in
a:if
may contain data bindings. Therefore, when the condition value ofa:if
is switched, the framework has local rendering procedures for ensuring the condition block is destroyed or re-rendered during switching. In addition,a:if
does not trigger rendering action when the initial rendering condition is false. Local rendering starts only when the condition value switches to true for the first time. hidden
controls display and hiding, and components are rendered all the time.
In general, a:if
has higher switching consumption while hidden
has higher initial rendering consumption. Therefore, in scenarios that require frequent switching, hidden
is better. If the condition value is not frequently switched at runtime, a:if
is better.