微信小程序7——条件渲染

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

<view wx:if="{{condition}}">Ture</view>

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

  <view wx:if="{{sum === 1}}">男</view>
  <view wx:elif="{{sum === 2}}">女</view>
  <view wx:else> 其他 </view>

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

 <block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
  </block>

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

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

<view hidden="{{condition}}">当condition为true时隐藏，为false时显示</view>

4.wx:if与hidden的对比
① 运行方式不同
wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden 以切换样式的方式（display: none/block;)，控制元素的显示与隐藏
②使用建议
频繁切换时，建议使用hidden
控制条件复杂时，建议使用wx:if 搭配 wx:elif、wx:else进行展示与隐藏的切换