【微信小程序】WXML模板语法 —— 条件渲染&&列表渲染

条件渲染

1.1、wx:if

（1）在小程序中使用wx:if="{{condition}}"来判断是否需要渲染该代码块：

<view wx:if="{{condition}}">True</view>

 （2）也可以用wx:elif 和 wx:else 来添加else判断：

<view wx:if="{{type === 1}}"> 男 </view>
<view wx:elif="{{type === 2}}"> 女 </view>
<view wx:else> 保密 </view>

1.2、结合<block>使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性，示例如下：

<block wx:if="{{true}}">
    <view> view1 </view>
    <view> view2 </view>
</block>

注意 ： <view>是一个组件，会在页面上做渲染，所以页面显示时会因此占据一定空间；<block>并不是一个组件，它只是一个包裹性质的容器，只接受控制属性，不会在页面中做任何渲染

（1）当使用<view>标签，且条件为"true"时，包裹着内容的外层<view>标签在也会显示出来

（2）当使用<block>标签，且条件为"true"时，包裹着内容的外层<block>标签并不会显示出来

 （3）当使用<view>或者<block>标签，且条件为"false"时，里面的内容以及外层的<view>或者<block>标签都会被隐藏

2.1、hidden

 在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏：

<view hidden="{{ condition }}">条件为 true 隐藏，条件为 false 显示 </view>

 2.2、wx:if 与 hidden 的对比

（1）运行方式不同

• wx:if 以动态创建和移动元素的方式，控制元素的展示和隐藏
• hidden 以切换样式的方式（display:none/block;），控制元素的显示与隐藏

（2）使用建议

• 频繁切换时，建议使用 hidden
• 控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

 列表渲染

3.1、wx:for

通过wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

<view wx:for="{{ array }}">
    索引是：{{index}} 当前项是：{{item}}
</view>

默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。 

3.2、手动指定索引和当前项的变量名*

• 使用 wx:for-index 可以指定当前循环项的索引的变量名
• 使用 wx:for-item 可以指定当前项的变量名

示例代码如下：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
    索引是：{{idx}} 当前项是：{{itemName}}
</view>

3.3、wx:key的使用

类型与Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：

//data 数据
data:{
    userList:[
        { id: 1,name:'小红' },
        { id: 2,name:'小黄' },
        { id: 3,name:'小白' }
    ]
}

//wxml 结构
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>