All Products
Document Center

Conditional rendering

Last Updated: Feb 04, 2021


Use a:if="{{condition}}" to determine whether the code block needs to be rendered in the framework.

  1. <view a:if="{{condition}}"> True </view>

You can also use a:elif and a:else to add a else block.

  1. <view a:if="{{length > 5}}"> 1 </view>
  2. <view a:elif="{{length > 2}}"> 2 </view>
  3. <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.

  1. <block a:if="{{true}}">
  2. <view> view1 </view>
  3. <view> view2 </view>
  4. </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 of a: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.