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

男娘i 2024-03-30 11:29 133阅读 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. 结合 使用 wx:if

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

来,并在 标签上使用 wx:if 控制属性,示例如下:

800b649f4c1644659038e18ed6bff072.png

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

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

发表评论

表情:
评论列表 (有 0 条评论,133人围观)

还没有评论,来说两句吧...

相关阅读