件渲染。
wx:if
我们用 wx:if = "{{condition}}" 来判断是否需要渲染该代码块。如：
<view wx:if="{{condition}}">条件为真</view>
也可以用wx:elif和wx:else来添加一个else块：
<view wx:if = "{{len > 5}}"> 1 </view>
<view wx:elif = "{{len > 2}}"> 2 </view>
<view wx:else > 3> 3 </view>
wx:if 是一个控制属性，需要将它添加到一个组件标签上。如果想一次性控制多个组件标签该如何操作呢？我们可以借助<block/>标签来实现这一操作，也就是把wx:if作用在<block/>标签上。如：
<block wx:if = "{{true}}">
<view> 标签1 </view>
<view> 标签2 </view>
</block>
需要注意<block />并不是组件，它只是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
wx:if 也是惰性的，如果在初始渲染时条件为false，框架什么也不做，在条件第1次为true时才开始局部渲染。
相比之下，hidden就简单的多，组件始终会被渲染，只需要简单的控制显示OR隐藏。
那么什么情况下用hidden，什么情况下用wx:if呢？两者并没有明确的界限。一般来说，wx:if有较高的切换消耗，而hidden有更高的初始渲染消耗。因此，如果需要频繁切换，用hidden更好；如果运行时条件改变频率不大，则wx:if更合适。
列表渲染
列表语句（for循环）可用于.wxml中进行列表渲染。
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
数组默认下标变量名为index，数组默认元素变量名为item。示例如下：
<view wx:for ="{{items}}">
{{index}}: {{item.message}}
</view>
//page.js
Page({
data:{
items:[{
message:'foo'
},{
message:'bar'
}]
}
})
//结果显示为
0：foo
1：bar
可以使用 wx:for-item 指定数组元素的变量名，使用 wx:for-index 指定数组下标的变更名。如：
<view wx:for ="{{items}}" wx:for-index= "idx" wx:for-item= "itemName">
{{idx}}: {{itemName.message}}
</view>
wx:for也可以嵌套使用：
<view wx:for ="{{items}}" wx:for-item= "i">
<view wx:for ="{{items}}" wx:for-item= "j">
<view wx:if = "{{i <= j}}">
{{i}} * {{i}} = {{i * j}}
</view>
</view>
</view>
//page.js
Page({
data:{
items:[1,2,3,4,5,6,7,8,9]
}
})
也可以借助<block />标签使用wx:for来控制多个组件的渲染：
<block wx:for= "{{1,2,3}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
如果列表中项目的位置会发生变动，或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如<input />中输入的内容，<switch />的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。
wx:key的值有两种形式：
- 字符串，代表在for循环的array中item的某个property，该property的值需要是列表中唯一的字符串或数字，且不能动态改变。
- 保留关键字 *this，代表在for循环中的item本身。这种表示需要item本身是一个唯一的字符串或者数字。例如，当数据改变触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保它们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如果不使用wx:key，会报出一个警示（warning），如果明确知道该列表是静态的，或者不必关注其顺序，可以选择忽略。
示例代码如下：
<!--wx-key-demo.wxml-->
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;">
{{item.id}}
</switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;">
{{item}}
</switch>
<button bindtap="addNumberToFront"> Add to the front </button>
//wx-key-demo.js
Page({
data: {
objectArray:[
{id: 5, unique: 'unique_5'},
{id: 4, unique: 'unique_4'},
{id: 3, unique: 'unique_3'},
{id: 2, unique: 'unique_2'},
{id: 1, unique: 'unique_1'},
{id: 0, unique: 'unique_0'}
],
numberArra