（二）02-WXML模板语法详解-条件渲染 ——wx：if、wx：elif和wx：else用法 & block标签用法 & hidden属性用法

条件渲染

• wx:if

• wx:else

• wx:elif

• wx:else

<view wx:if='{{score>=90}}'>优秀</view>
<view wx:elif='{{score<90&&score>=80}}'>良好</view>
<view wx:elif='{{score<80&&score>=60}}'>一般</view>
<view wx:else>just so so</view> 

• block标签用法

  • block标签不会渲染到页面中，类似于vue中的template标签

  <!-- <view wx:if='{{flag}}'>Tom</view>
  <view wx:if='{{flag}}'>Jerry</view>
  <view wx:if='{{flag}}'>Spike</view> -->
  <!-- block标签本身不会渲染 -->
  <block wx:if='{{flag}}'>
    <view>kitty</view>
    <view>peppa</view>
    <view>ktty1</view>
  </block>
  

  图示：

• hidden属性和wx:if的区别

  • 类似于vue中的中v-if和v-show的区别
    • 内置组件都有一个hidden属性：如果值为false就显示，为true就不显示
    • 通过hidden控制标签渲染的话，无论是否显示内容，实际上都进行了渲染，类似于vue中的v-show
    • 如果要频繁的控制组件的显示或者隐藏，那么推荐使用hidden