支付寶小程序框架 AXML·條件渲染

a:if

在框架中，使用 a:if="{{condition}}" 來(lái)判斷是否需要渲染該代碼塊。

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

也可以使用 a:elif 和 a:else 添加一個(gè) else 塊。

<view a:if="{{length > 5}}"> 1 </view>
<view a:elif="{{length > 2}}"> 2 </view>
<view a:else> 3 </view>

block a:if

因?yàn)?a:if 是控制屬性，需要在標(biāo)簽中使用。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用 <block/> 標(biāo)簽包裝多個(gè)組件，并使用a:if 來(lái)控制屬性。

<block a:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

說(shuō)明：<block/> 并不是一個(gè)組件，只是一個(gè)包裝元素，不會(huì)在頁(yè)面中做任何渲染，只接受控制屬性。

對(duì)比 a:if 與 hidden

• a:if 中的模板可能包含數(shù)據(jù)綁定，所以當(dāng) a:if 的條件值切換時(shí)，框架有局部渲染的過(guò)程，用于確保條件塊在切換時(shí)銷(xiāo)毀或重新渲染。此外， a:if 在初始渲染條件為 false 時(shí)，不觸發(fā)任何渲染動(dòng)作，當(dāng)條件第一次變成 true 時(shí)才開(kāi)始局部渲染。
• hidden 控制顯示與隱藏，組件始終會(huì)被渲染。

一般來(lái)說(shuō)，a:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，在需要頻繁切換的情景下，用 hidden 更好。如果在運(yùn)行時(shí)條件改變不多則 a:if 較好。