1. 程式人生 > >微信小程式的條件渲染

微信小程式的條件渲染

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較好。