条件渲染

条件渲染

1. wx:if="{{true/false}}"
2. we:if wx:elif wx:else
3. hidden="{{true/false}}

使用条件

• 当标签不是很频繁的切换显示 优先使用 wx:if
  • 直接把标签从页面结构中移除掉（多次添加移除会损坏性能）
• 当标签频繁的切换显示的时候 优先使用 hidden
  • 通过添加样式的方式来切换显示 (display:none)，所以 hidden属性不要和样式 display一起使用

<view>
  <view>条件渲染</view>
  <view wx:if="{{false}}">隐藏</view>
  <view wx:if="{{true}}">显示</view>

  <view wx:if="{{false}}">1111</view>
  <view wx:elif="{{false}}">2222</view>
  <view wx:else>3333</view>

  <view hidden>hidden1</view>
  <view hidden="true">hidden2</view>
  <view hidden="false">hidden3</view>

</view>

运行结果