wxml：条件渲染与列表渲染

上一篇我介绍了wxml的数据绑定，这次介绍它的条件渲染。

条件渲染

条件渲染相当于在小程序页面的输出条件语句。

(1)wx:if

除了数据绑定，我们常常会使用逻辑分支，这时候可以使用wx:if="{ {condition}}"来判断是否需要渲染该代码块

<view wx:if="{
  {showContent}}">内容</view>
//page.js
Page({
data:{
showContent:true}
}
});

当showContent的值为true是，view会被渲染，为false时则不会。
和普通的编程语言一样，也可以用wx:elif和wx:else来添加一个else块：

<view wx:if="{
  {length>5}}">1</view>
<view wx:elif="{
  {length>2}}">2</view>
<view wx:else>3</view>

上述代码页面只渲染最后一个view。wx:elif和wx:else必须和wx:if配合使用，否则会导致页面解析错误。

(2)block wx:if

因为wx:if是一个控制属性，可以添置在任何组件的标签上，但如果我们需要包装多个组件，又不影响布局是，可以用<block/ >标签将多个组件包装起来，并在上边使用wx:if的控制属性。