微信小程序学习（五）：条件渲染与列表渲染

1、条件渲染

条件渲染主要用来控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式：

• 使用 wx:if、wx:elif、wx:else 属性组
• 使用 hidden 属性

<view wx:if="{{num === 1}}"> 1 </view>
<view wx:elif="{{num === 2}}"> 2 </view>
<view wx:else> 3…… </view>

<view hidden="{{flag}}"> 1 </view>

wx:if 和 hidden 二者的区别：

• wx:if：当条件为 true 时将内容渲染出来，否则元素不会进行渲染，通过 移除/新增节点 的方式来实现
• hidden：当条件为 true 时会将内容隐藏，否则元素会显示内容，通过 display 样式属性来实现的

2、列表渲染

2.1 基本使用

列表渲染：就是指通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上

• 只需要在组件上使用 wx:for 属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件
• 默认数组当前项的变量名默认为 item
• 默认数组的当前项的下标变量名默认为 index
• 在使用 wx:for 对数组进行遍历的时候，建议加上 wx:key 属性，如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，即以后数据不会改变，或者不必关注其顺序，可以选择忽略。
• wx:key 的值以两种形式提供：
  • 字符串：代表需要遍历的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变
  • 保留关键字 *this 代表在 for 循环中的 item 本身，当 item 本身是一个唯一的字符串或者数字时可以使用

<!-- 如果渲染的是数组，item：数组的每一项，index：下标 -->
<view wx:for="{{ numList }}">{{ item }} - {{ index }}</view>

<!-- 如果渲染的是对象，item：对象属性的值，index：对象属性 -->
<view wx:for="{{ obj }}">{{ item }} - {{ index }}</view>

<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>
<view wx:for="{{ fruitList }}" wx:key="index">{{ item.name }}</view>

<!-- 保留关键字 *this，*this 代表的是 item 本身，item 本身是唯一的字符串或者数字 -->
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>

2.2 修改默认下标和变量名

如果需要对默认的下标和变量名进行修改，可以使用 wx:for-item 和 wx:for-index

• 使用 wx:for-item 可以指定数组当前元素的变量名
• 使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{ animal }}" wx:for-item="itemName" wx:for-index="i">
  {{ itemName.name }} - {{ itemName.avatar }} - {{ i }}
</view>