【微信小程序】条件渲染/列表渲染
条件渲染
1.wx:if
在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块
也可以结合wx:elif和wx:else来添加else判断:
2.结合 block 使用wx:if
如果要一次性控制多个组件的展示与隐藏,可以使用一个
3.hidden
在小程序中,直接使用hidden="{{condition}}" 也能控制元素的显示与隐藏
4wx:if与hidden的对比
-
运行方式不同
wx:if以动态创建和移除的方式,控制元素的展示与隐藏
hidden:以切换样式的方式(display:none/block)控制元素的显示与隐藏 -
使用建议
频繁切换时,建议使用hidden
控制条件复杂时,建议使用wx:if搭配wx:elif,wx:else进行展示与隐藏
列表渲染
1.wx:for
默认情况下,当前循环项的索引用index表示,当前循环项用item表示
2.手动指定索引和当前项的变量名
- 使用wx:for-index可以指定当前循环项的索引的变量名
- 使用wx:for-item可以指定当前项的变量名
3.wx:key的使用
类似于Vue列表渲染中的:key,小程序在实现列表渲染时,也建议渲染出来的列表项指定唯一的key的值,从而提高渲染的效率,示例代码如下