首頁 > 微信小程式 > 小程式開發 > 微信小程式教程之條件渲染

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

Anani
發布: 2020-05-04 13:50:53
原創
154 人瀏覽過

條件渲染

所謂條件渲染,是指資料綁定表達式的邏輯值來判斷是否渲染目前元件。在下面一段程式碼中,有一段使用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中文網其他相關文章!

相關標籤:
1
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板