微信小程序开发实战（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源创计划”，欢迎正在阅读的你也加入，一块儿分享。