P22_条件渲染

条件渲染

1. wx:if
   
   在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
   
   
   
   也可以用 wx:elif 和 wx:else 来添加 else 判断：
   
   
2. 结合 使用 wx:if
   
   如果要一次性控制多个组件的展示与隐藏，可以使用一个 标签将多个组件包装起来，并在 标签上使用 wx:if 控制属性，示例如下：
   
   
   
   注意： 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
3. hidden
   
   在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏：
   
   
4. wx:if 与 hidden 的对比
   1. 运行方式不同
      • wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
      • hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏
   2. 使用建议
      • 频繁切换时，建议使用 hidden
      • 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换