微信小程式教程之條件渲染

條件渲染

所謂條件渲染，是指資料綁定表達式的邏輯值來判斷是否渲染目前元件。在下面一段程式碼中，有一段使用hidden屬性的程式碼：

<view class=&#39;content&#39; hidden=&#39;{{flag ? true: false}}&#39;>
    <text>{{hiddencontent}}</text>
 </view>

在上面的條碼中，當flag變數的值為true時，view元件及包含的元件將不會渲染，當flag變數的值為false時，將view元件輸出渲染到頁面。

wx:if 條件渲染

在微信小程式wxml檔中，提供了另一種方式進行類似的條件渲染，就是使用wx:if這個屬性來控制目前的元件，程式碼如下：

<view wx:if= &#39;{{condition}}&#39;>内容</view>

在上面的程式碼中，當condition變數的值為true時，view元件將渲染輸出，當condition的變數為false時，view元件將不會渲染。

在我們看來，wx:if 屬性和元件的hidden類似，不同的是，控制是否渲染的邏輯變數是相反的，不過使用wx:if可以更方便的控制，可以wx:if ,wx:else 來新增多個分支程式碼區塊，控製表達式的值為true渲染一個分支，為false則渲染另一個分支，請看程式碼：

<view wx:if= &#39;{{length > 3}}&#39;>内容1</view>
<view wx:elif= &#39;{{length < 5}}&#39;>内容2</view>
<view wx:else&#39;>内容3</view>

在上面的程式碼中，當length大於3是渲染內容1，當length的值大於3且小於5時，介面渲染輸出內容2，如果以上條件都不滿足則渲染輸出內容3。

聰明靠努力學習,學識靠平常累積

以上是微信小程式教程之條件渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！