微信小程序開發實戰（3）：條件渲染

  小程序的佈局支持直接在組件中使用條件渲染屬性，該屬性的語法以下：

<view wx:if="{{condition}}"> 知足條件 </view>

其中 wx:if 是一個控制屬性， condition 是條件表達式。若是 condition 的值爲 true ，則輸出 <view> 組件中的值。若是有多個條件，和 if 語句的條件同樣，中間能夠用 && 表示邏輯與，用 || 表示邏輯或。例如，下面的佈局代碼的 count 變量值若是小於 4 ，則輸出「數值比較小」，不然什麼也不會輸出。

<view wx:if="{{count < 4}}"> 數值比較小 </view>

wx:if 也能夠像 if 語句同樣，使用 else if 和 else 。與 wx:if 對應的是 wx:elif 和 wx:else 。下面的佈局代碼經過對 count 不一樣值的判斷，會輸出不一樣的字符串。讀者可自行設置 count 變量的值來控制輸出結果。

<view> <view wx:if="{{count < 4 && count > 0}}"> 數值比較小 </view> <view wx:elif="{{count == 100 || count == 300}}"> 固定數值 </view> <view wx:else> 其餘值 </view></view> 

若是在組件中使用 wx:if 、 wx:elif 或 ex:else ，只能控制當前的組件是否起做用。若是要控制多個組件，須要使用 <block> 、 <block> 並非一個組件，它僅僅是一個包裝組件，使用方法相似於容器組件，在 <block> 中能夠放置任意多個組件。例如，下面的佈局代碼使用了 3 個 <block> 標籤，分別使用了 wx:if 、 wx:elif 和 wx:else 進行控制。若是 count 等於 2 ，則顯示 2 個 view ， count 等於 3 ，則顯示 3 個 view ，不然，則顯示 1 個 view 。

<view class="flex-row"> <block wx:if="{{count == 2}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> </block> <block wx:elif="{{count == 3}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> </block> <block wx:else> <view id="green" class="scroll-view-item bc_green"></view> </block></view>

當 count 分別爲 2 、 3 以及其餘值時，顯示的效果如圖 1 、圖 2 和圖 3 所示。

圖1  count == 2的效果

圖2  count == 3的效果

圖3  count == 5的效果

要注意的是， wx:elif 和 wx:else 須要緊跟在 wx:if 後面。若是 wx:if 的條件知足，那麼後面的 wx:elif 和 wx:else 都不會執行。若是用多個 wx:if ，只要條件知足，就都會執行。例如，下面的兩段佈局分別使用了 wx:if 、 wx:elif 和兩個 wx:if 。

使用 wx:if 和 wx:elif

<view class="flex-row"> <block wx:if="{{count < 5}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> </block> <block wx:elif="{{count == 3}}"> <view id="green" class="scroll-view-item bc_green" ></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> </block></view>

使用兩個 wx:if 。

<view class="flex-row"> <block wx:if="{{count < 5}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> </block> <block wx:if="{{count == 3}}"> <view id="green" class="scroll-view-item bc_green" ></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> </block></view>

很明顯，若是 count 等於 3 ， count < 5 和 count == 3 兩個條件都知足，若是使用 wx:elif ，只有使用 wx:if 的 <block> 會執行，而若是使用兩個 wx:if ，兩個 <block> 都會執行，效果如圖 4 所示。

圖4  兩個wx:if的效果

往期回顧：

微信小程序開發實戰（1）：容器組件

微信小程序開發實戰（2）：添加廣告輪詢圖

掌握更多小程序開發以及其餘開發技巧，請長按識別下面二維碼：

本文分享自微信公衆號 - 極客起源（geekculture）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。