【微信小程序】条件渲染/列表渲染

条件渲染

1.wx:if

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

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

2.结合 block 使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用wx:if 控制属性，示例如下:

3.hidden

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

4wx:if与hidden的对比

1. 运行方式不同

   wx：if以动态创建和移除的方式，控制元素的展示与隐藏
   hidden：以切换样式的方式（display：none/block）控制元素的显示与隐藏

2. 使用建议

   频繁切换时，建议使用hidden

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

列表渲染

1.wx：for

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

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

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

3.wx：key的使用

类似于Vue列表渲染中的：key，小程序在实现列表渲染时，也建议渲染出来的列表项指定唯一的key的值，从而提高渲染的效率，示例代码如下