微信小程序 - 条件渲染（wx:if、hidden）与列表渲染（wx:for）

一、条件渲染概述

1. 条件渲染用于根据特定条件决定是否渲染某部分内容

2. 微信小程序提供了两种方式实现条件渲染，分别是 wx:if、hidden

二、条件渲染

1、wx:if

（1）基本介绍

1. wx:if 根据 condition 的真假决定是否渲染该组件及其子组件

2. condition 为 true 时渲染，否则不渲染

3. wx:if 是惰性的，初始条件为 false 时不会渲染，条件变为 true 时才会渲染

<view wx:if="{{【condition】}}">【content】</view>

（2）演示

<view wx:if="{{isShow}}">显示内容</view>

2、wx:elif 与 wx:else

（1）基本介绍

• wx:elif 和 wx:else 用于多条件判断

<view wx:if="{{【condition1】}}">【content1】</view>
<view wx:elif="{{【condition2】}}">【content2】</view>
<view wx:else>【content3】</view>

（2）演示

<view wx:if="{{score >= 90}}">优秀</view>
<view wx:elif="{{score >= 60}}">及格</view>
<view wx:else>不及格</view>

3、hidden

（1）基本介绍

1. hidden 根据 condition 的真假控制组件的显示与隐藏

2. condition 为 true 时隐藏，false 时显示

3. hidden 通过 CSS 的 display 属性控制显示状态

<view hidden="{{【condition】}}">【content】</view>

（2）演示

<view hidden="{{isHidden}}">隐藏内容</view>

4、wx:if 对比 hidden

（1）渲染机制

1. wx:if 条件为 true 时渲染，否则不渲染

2. hidden 始终渲染，仅通过 CSS 控制显示状态

（2）使用场景

1. wx:if 条件变化较少，或组件渲染开销较大时使用

2. hidden 需要频繁切换显示状态时使用

三、列表渲染概述

1. 列表渲染用于根据数组或对象的数据动态生成多个组件

2. 微信小程序通过 wx:for 实现循环渲染

四、列表渲染

1、基本介绍

• wx:for 根据数组或对象循环渲染组件

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

<view wx:for="{{【object】}}">
  {{index}}: {{item}}
</view>

2、演示

1. 数组列表渲染

<view wx:for="{{fruits}}">
  {{index + 1}}. {{item}}
</view>

Page({
  data: {
    fruits: ['苹果', '香蕉', '橙子']
  }
});

2. 对象列表渲染

<view wx:for="{{list}}">
  {{item.id}} - {{item.name}}
</view>

Page({
  data: {
    list: [
      { id: 1, name: '小明' },
      { id: 2, name: '小红' },
      { id: 3, name: '小刚' }
    ]
  }
});

3. 嵌套列表渲染

<view wx:for="{{classes}}">
  <text>{{item.name}} 班学生：</text>
  <view wx:for="{{item.students}}">
    {{index + 1}}. {{item}}
  </view>
</view>

Page({
  data: {
    classes: [
      {
        name: '一年级',
        students: ['小明', '小红']
      },
      {
        name: '二年级',
        students: ['小刚', '小丽']
      }
    ]
  }
});

3、自定义变量名

（1）基本介绍

1. 可以通过 wx:for-item 自定义当前循环项变量名

2. 可以通过 wx:for-index 自定义当前循环项的索引变量名

<view wx:for="{{【array / object】}}" wx:for-item="【currentItem】" wx:for-index="【currentIndex】">
  {{【currentIndex】}}: {{【currentItem】}}
</view>

（2）演示

<view wx:for="{{fruits}}" wx:for-item="fruit" wx:for-index="i">
  {{i + 1}}. {{fruit}}
</view>

Page({
  data: {
    fruits: ['苹果', '香蕉', '橙子']
  }
});

4、wx:key

（1）基本介绍

• wx:key 用于指定列表中每个项的唯一标识符，以提高渲染性能

<view wx:for="{{【array】}}" wx:key="【key】">
  {{index}}: {{item}}
</view>

<view wx:for="{{【object】}}" wx:key="【key】">
  {{index}}: {{item}}
</view>

（2）适用场景

1. wx:key 的适用于数据可能发生变化的列表，例如，排序、删除、新增

2. 如果没有 wx:key，当列表数据发生变化时，会重新渲染整个列表，而不是只更新变化的部分

（3）演示

1. 如果列表项是对象，可以使用对象的某个唯一属性（例如，id）作为 wx:key 的值

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

Page({
  data: {
    users: [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Charlie' }
    ]
  }
});

2. 如果列表项是简单数据类型（例如，字符串、数字），可以直接使用 *this（数组项本身）作为 wx:key 的值

<view wx:for="{{fruits}}" wx:key="*this">
  {{item}}
</view>

Page({
  data: {
    fruits: ['Apple', 'Banana', 'Orange']
  }
});

3. 如果列表项没有唯一标识符，可以使用 index 作为 wx:key 的值

<view wx:for="{{fruits}}" wx:key="index">
  {{index + 1}}. {{item}}
</view>

Page({
  data: {
    fruits: ['Apple', 'Banana', 'Orange']
  }
});