持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

小程序学习篇（二），今天一起学习一下小程序中WXML模板语法-关于条件和列表的使用吧！相信学完了小程序系列篇，大家都能开发出自己满意的小程序了。

一：条件渲染

wx:if

在小程序中，使用 wx:if="{{isTrue}}" 来判断是否需要渲染该代码块

举个栗子

<view wx:if="{{isTrue}}>你好！</view>

通过wx:elif 和 wx:else 来添加 else 判断：

<view wx:if="{{gender == 0}}">男</view>
<view wx:elif="{{gender == 1}}">女</view>
<view wx:else>其他</view>

结合<block>使用wx:if 

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

举个栗子

<block wx:if="{{true}}">
    <view>你好吗</view>
    <view>我很好</view>
</block>

hidden

直接使用 hidden="{{ isTrue }}" 也能控制元素的显示与隐藏

举个栗子

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

wx:if与hidden的对比

①运行方式不同

1 wx:if 以 动态创建和移除元素 的方式，控制元素的展示与隐藏

2 hidden 以 切换样式 的方式（ display: none/block），控制元素的显示与隐藏

② 使用建议

1 频繁切换时，建议使用 hidden

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

二：列表渲染

wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构。 循环项的索引用 index 表示, 循环项用 item 表示

举个栗子

<view wx:for="{{array}}">{{item}}</view>

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

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

2 使用 wx:for-item 指定当前项的变量名

举个栗子

<view wx:for="{{array}}" wx:for-index="ind" wx:for-item="itemName">{{itemName}}</view>

wx:key的使用

类似于 Vue 列表渲染中的  :key，小程序在实现列表渲染时，也要渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率

举个栗子

<view wx:for="{{array}}" wx:key="id">{{item}}</view>