条件渲染
- 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
- 类似于vue中的中v-if和v-show的区别