条件渲染

@wx:if

以绑定属性的方式使用wx:if判断条件是否成立，成立则渲染，否则不渲染或不处理

data: {
  age: 18,
  isShow: true
}

wx:if

单分支判断

<view wx:if = '{{ age >= 18 }}'> Welcome </view>

单分支判断还可以使用hidden属性实现条件渲染；为true时，隐藏；为false时，显示

<view hidden="{{age >= 18}}">88</view>
<view hidden="{{isShow}}">88</view>

wx:if wx:else

双分支判断

<view wx:if = '{{ age >= 18 }}'> Welcome </view>
<view wx:else> Bye </view>

wx:if wx:elif wx:else

多分支判断

可读性不好，不建议使用

凡是用到布尔变量的地方，都可以使用比较表达式

wx:if是通过加载或移除组件的方式实现条件渲染；真，加载组件；假，移除组件；有没有的问题

hidden是通过display是否为none实现条件渲染；组件始终加载；显示不显示的问题

复杂的逻辑切换，使用wx:if；频繁切换状态，使用hidden

使用调试器的appData面板实时调试