微信小程序——条件渲染和列表渲染

条件渲染

wx:if

在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染某个代码块，通过 wx:elif="{{condition}}" 和 wx:else 作补充判断。

block标签

1. 什么是 block
   block 标签是一个容器，用来包裹多个组件，不会被渲染到界面上
2. 结合 <block> 标签使用 wx:if
   如果需要一次性控制多个组件的展示与隐藏，可以使用 <block></block> 标签将多个组件包裹起来，并在 <block> 标签上使用 wx:if 来控制显示

hidden

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

wx:if 和 hidden 的区别

1. 运行方式不同

• wx:if 以动态创建和移除元素的方式，控制元素的显示与隐藏
• hidden 以切换样式（display）的方式来控制元素的显示与隐藏
  2.使用建议
• 当需要频繁切换元素的显示与隐藏，建议使用 hidden。如果使用 wx:if 频繁的创建和移除元素，对小程序性能的影响比较大
• 当控制条件复杂时，建议使用 wx:if 搭配 wx:elif 和 wx:else 来控制元素的显示和隐藏

列表渲染

wx:for

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

<view wx:for="{{array}}">
第{{index}}条数据的值是{{item}}
</view>

其中，index 代表当前索引，item 是索引在数组中对应的值

wx:key

小程序在实现列表渲染时，可以通过 wx:key 来提高渲染效率

<view wx:for="{{array}}" wx:key="index">
第{{index}}条数据的值是{{item}}
</view>

其中，wx:key 赋值不用 Mastache 语法，可以用数组中的元素（如 id），也可以用 index 索引当作 key 值