微信小程序开发实战（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的效果