条件渲染

WePY 推荐使用 v-show，v-if 控制条件渲染

  • wx:if
  1. // example 01
  2. <div wx:if="{{ condition }}"></div>
  4. // example 02
  5. <div wx:if="{{ condition2 }}"></div>
  6. <div wx:else></div>
  8. // example 03
  9. <div wx:if="{{ condition3 }}"></div>
  10. <div wx:elif="{{ condition4 }}"></div>
  11. <div wx:else></div>
  • hidden
  1. <div hidden="{{ condition }}"></div>

Vue 绑定语法

  • v-if
  1. // example 01
  2. <div v-if="condition"></div>
  4. // example 02
  5. <div v-if="condition2"></div>
  6. <div v-else></div>
  8. // example 03
  9. <div v-if="condition3"></div>
  10. <div v-else-if="condition4"></div>
  11. <div v-else></div>

编译后：

  1. // example 01
  2. <view wx:if="{{ condition }}"></view>
  4. // example 02
  5. <view wx:if="{{ condition2 }}"></view>
  6. <view wx:else></view>
  8. // example 03
  9. <view wx:if="{{ condition3 }}"></view>
  10. <view wx:elif="{{ condition4 }}"></view>
  11. <view wx:else></view>
  • v-show
  1. <div v-show="condition"></div>

编译后：

  1. <view hidden="{{ !condition }}"></view>