【小程序】条件渲染与列表渲染

男娘i 2024-03-30 11:29 74阅读 0赞

**目录**

条件渲染

1. wx:if

2. 结合 使用 wx:if

3. hidden

4. wx:if 与 hidden 的对比

列表渲染

1. wx:for

2. 手动指定索引和当前项的变量名\*

3. wx:key 的使用

## 条件渲染 ##

### 1. wx:if ###

在小程序中，使用 wx:if="\{ \{condition\}\}" 来判断是否需要渲染该代码块：

![53fbb45d4a8b41e693e7c54774df502a.png][]

也可以用 wx:elif 和 wx:else 来添加 else 判断：

![8b2d8473c9e24cc593bc88a0df54ef20.png][]

### 2. 结合 <block> 使用 wx:if ###

如果要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起

来，并在<block> 标签上使用 wx:if 控制属性，示例如下：

![800b649f4c1644659038e18ed6bff072.png][]

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

### 3. hidden ###

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

![6d5405708045424db1b8b8c9e8122838.png][]

### 4. wx:if 与 hidden 的对比 ###

运行方式不同

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏

hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏

使用建议

频繁切换时，建议使用 hidden

控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

## 列表渲染 ##

### 1. wx:for ###

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：![9a968b0eb5934ed9b1b2568522b4e6e6.png][]

默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。

### 2. 手动指定索引和当前项的变量名\* ###

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

名 示例代码如下：

![4661a0574965435e85d80b7cd36e31a1.png][]

### 3. wx:key 的使用 ###

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

的 key 值，从而提高渲染的效率，示例代码如下：![8bbc1b1e7ae24f55a79f602386430b85.png][]

[53fbb45d4a8b41e693e7c54774df502a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c17721ee70fb4fac94436103b2bc44cc.png
[8b2d8473c9e24cc593bc88a0df54ef20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/30d1de5882a140199b7b5213bf51d54a.png
[800b649f4c1644659038e18ed6bff072.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/89511f89e9c44fda82545c53e3dd4b55.png
[6d5405708045424db1b8b8c9e8122838.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9b2733e530f54fe2a74d2bd6bcb706c0.png
[9a968b0eb5934ed9b1b2568522b4e6e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f9f9c7b84f2e4c71a3c2da2850a869aa.png
[4661a0574965435e85d80b7cd36e31a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a7bb4b5b6b8447cab42a888b22258471.png
[8bbc1b1e7ae24f55a79f602386430b85.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/058955175dbc422b959c82f53894cf23.png