微信小程序框架wxml（三）wxml条件渲染

记录一下wxml的条件渲染，

1.使用wx:if

①wxml的代码

<view wx:if="{{condition}}">True</view><view wx:if="{{length > 5}}"> length>5 </view><view wx:elif="{{length > 2}}"> length>2 </view><view wx:else> 其他 </view>

②在js的data为condition赋值为true，length赋值为6

③效果图↓

2.block wx:if，用block对一组view进行组装，可以控制一组view的显示与隐藏

<block wx:if="{{true}}">  <view> view1 </view>  <view> view2 </view></block>

为true时显示，为false时隐藏。

与hidden的区别：

①block wx:if条件值切换时，会发生局部渲染；且它是惰性的，初始渲染时为false什么都不做，只有初次为true时才进行渲染。

②hidden不管初始值是什么，均进行渲染，只是显示与隐藏的区别。

因此，有多次切换时，使用hidden效率更高；值基本不变时，使用wx:if的效率更高。