條件渲染
所謂條件渲染,是指資料綁定表達式的邏輯值來判斷是否渲染目前元件。在下面一段程式碼中,有一段使用hidden屬性的程式碼:
<view class='content' hidden='{{flag ? true: false}}'> <text>{{hiddencontent}}</text> </view>
在上面的條碼中,當flag變數的值為true時,view元件及包含的元件將不會渲染,當flag變數的值為false時,將view元件輸出渲染到頁面。
wx:if 條件渲染
在微信小程式wxml檔中,提供了另一種方式進行類似的條件渲染,就是使用wx:if這個屬性來控制目前的元件,程式碼如下:
<view wx:if= '{{condition}}'>内容</view>
在上面的程式碼中,當condition變數的值為true時,view元件將渲染輸出,當condition的變數為false時,view元件將不會渲染。
在我們看來,wx:if 屬性和元件的hidden類似,不同的是,控制是否渲染的邏輯變數是相反的,不過使用wx:if可以更方便的控制,可以wx:if ,wx:else 來新增多個分支程式碼區塊,控製表達式的值為true渲染一個分支,為false則渲染另一個分支,請看程式碼:
<view wx:if= '{{length > 3}}'>内容1</view> <view wx:elif= '{{length < 5}}'>内容2</view> <view wx:else'>内容3</view>
在上面的程式碼中,當length大於3是渲染內容1,當length的值大於3且小於5時,介面渲染輸出內容2,如果以上條件都不滿足則渲染輸出內容3。
聰明靠努力學習,學識靠平常累積
以上是微信小程式教程之條件渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章!