条件渲染

wx:if

<!-- 在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块 -->
<view wx:if="{{condition}}">True</view>

wx:elif 和 wx:else

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

结合 block 使用 wx:if

block 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

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

hidden

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

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

wx:if 与 hidden 的对比

① 运行方式不同
   wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
   hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏
② 使用建议
   频繁切换时，建议使用 hidden
   控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

循环渲染

wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构

当前循环项的索引用 index 表示；当前循环项用 item 表示

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

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

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

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

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

wx:key 的使用

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，

从而提高渲染的效率，

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