微信小程式的條件渲染
阿新 • • 發佈:2019-01-31
1,wx.if
在微信小程式中,小程式是使用wx.if="{{條件}}"來判斷是否渲染該程式碼塊,用法如下:
<view wx.if="{{條件}}">True</view>
也可以用wx.elif和wx.else來新增一個else塊,事例如下:
<view wx:if="{{a>1}}"> 1 </view>
<view wx:elif="{{a>2}}"> 2 </view>
<view wx:else> 3 </view>
2,block wx:if
wx:if是一個控制屬性,需要將它新增到標籤上,但是如果我們想要一次性判斷多個標籤,我用可以使用<block/>將多個元件包裝起來,並在上邊使用wx:if控制屬性,
其中並不是一個元件,它僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。事例如下:
<block wx:if="{{TURE}}">
<view>view1</view>
<view>view2</view>
</block>
注:一般來說,wx:if
有更高的切換消耗而hidden
有更高的初始渲染消耗。因此,如果需要頻繁切換的情景下,用hidden
更好,如果在執行時條件不大可能改變則wx:if
較好。