一、条件渲染概述
-
条件渲染用于根据特定条件决定是否渲染某部分内容
-
html" title=微信html" title=小程序>小程序>微信html" title=小程序>小程序提供了两种方式实现条件渲染，分别是
wx:if、hidden
二、条件渲染
1、wx:if
（1）基本介绍
-
wx:if根据condition的真假决定是否渲染该组件及其子组件 -
condition为 true 时渲染，否则不渲染 -
wx:if是惰性的，初始条件为 false 时不会渲染，条件变为 true 时才会渲染
html"><view wx:if="{{【condition】}}">【content】</view>
（2）演示
html"><view wx:if="{{isShow}}">显示内容</view>
2、wx:elif 与 wx:else
（1）基本介绍
wx:elif和wx:else用于多条件判断
html"><view wx:if="{{【condition1】}}">【content1】</view>
<view wx:elif="{{【condition2】}}">【content2】</view>
<view wx:else>【content3】</view>
（2）演示
html"><view wx:if="{{score >= 90}}">优秀</view>
<view wx:elif="{{score >= 60}}">及格</view>
<view wx:else>不及格</view>
3、hidden
（1）基本介绍
-
hidden根据condition的真假控制组件的显示与隐藏 -
condition为 true 时隐藏，false 时显示 -
hidden通过 CSS 的 display 属性控制显示状态
html"><view hidden="{{【condition】}}">【content】</view>
（2）演示
html"><view hidden="{{isHidden}}">隐藏内容</view>
4、wx:if 对比 hidden
（1）渲染机制
-
wx:if条件为 true 时渲染，否则不渲染 -
hidden始终渲染，仅通过 CSS 控制显示状态
（2）使用场景
-
wx:if条件变化较少，或组件渲染开销较大时使用 -
hidden需要频繁切换显示状态时使用
三、列表渲染概述
四、列表渲染
1、基本介绍
wx:for根据数组或对象循环渲染组件
html"><view wx:for="{{【array】}}">{{index}}: {{item}}
</view>
html"><view wx:for="{{【object】}}">{{index}}: {{item}}
</view>
| 参数 | 说明 |
|---|---|
| array / object | 需要循环的数组 / 对象 |
| item | 当前循环项（默认名称） |
| index | 当前循环项的索引（默认名称） |
2、演示
- 数组列表渲染
html"><view wx:for="{{fruits}}">{{index + 1}}. {{item}}
</view>
javascript">Page({data: {fruits: ['苹果', '香蕉', '橙子']}
});
- 对象列表渲染
html"><view wx:for="{{list}}">{{item.id}} - {{item.name}}
</view>
javascript">Page({data: {list: [{ id: 1, name: '小明' },{ id: 2, name: '小红' },{ id: 3, name: '小刚' }]}
});
- 嵌套列表渲染
html"><view wx:for="{{classes}}"><text>{{item.name}} 班学生：</text><view wx:for="{{item.students}}">{{index + 1}}. {{item}}</view>
</view>
javascript">Page({data: {classes: [{name: '一年级',students: ['小明', '小红']},{name: '二年级',students: ['小刚', '小丽']}]}
});
3、自定义变量名
（1）基本介绍
-
可以通过
wx:for-item自定义当前循环项变量名 -
可以通过
wx:for-index自定义当前循环项的索引变量名
html"><view wx:for="{{【array / object】}}" wx:for-item="【currentItem】" wx:for-index="【currentIndex】">{{【currentIndex】}}: {{【currentItem】}}
</view>
（2）演示
html"><view wx:for="{{fruits}}" wx:for-item="fruit" wx:for-index="i">{{i + 1}}. {{fruit}}
</view>
javascript">Page({data: {fruits: ['苹果', '香蕉', '橙子']}
});
4、wx:key
（1）基本介绍
wx:key用于指定列表中每个项的唯一标识符，以提高渲染性能
html"><view wx:for="{{【array】}}" wx:key="【key】">{{index}}: {{item}}
</view>
html"><view wx:for="{{【object】}}" wx:key="【key】">{{index}}: {{item}}
</view>
（2）适用场景
-
wx:key的适用于数据可能发生变化的列表，例如，排序、删除、新增 -
如果没有
wx:key，当列表数据发生变化时，会重新渲染整个列表，而不是只更新变化的部分
（3）演示
- 如果列表项是对象，可以使用对象的某个唯一属性（例如，id）作为
wx:key的值
html"><view wx:for="{{users}}" wx:key="id">{{item.name}}
</view>
js">Page({data: {users: [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }]}
});
- 如果列表项是简单数据类型（例如，字符串、数字），可以直接使用
*this（数组项本身）作为wx:key的值
html"><view wx:for="{{fruits}}" wx:key="*this">{{item}}
</view>
js">Page({data: {fruits: ['Apple', 'Banana', 'Orange']}
});
- 如果列表项没有唯一标识符，可以使用 index 作为
wx:key的值
html"><view wx:for="{{fruits}}" wx:key="index">{{index + 1}}. {{item}}
</view>
js">Page({data: {fruits: ['Apple', 'Banana', 'Orange']}
});
