以下内容来自文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html
条件渲染
条件渲染,是指根据绑定表达示的逻辑来判定是否渲染当前组件。
wx:if
在框架中,使用 wx:if="{{condition}}"
来判断是否需要渲染该代码块:
<view wx:if="{{condition}}">True</view>
也可以用 wx:elif
和 wx:else
来添加一个 else 块:
<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>
block wx:if
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
同理
<view wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</view>
在打开调试器的时候就可以看出明显的差别:(输出的层次不一样)
分别为
<view>view2</view>
<view>view2</view>
和
<view>
<view>view2</view>
<view>view2</view>
</view>
注意: <block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
可以理解为一个表达式控制多个组件
wx:if
vs hidden
以下为hidden语法:
<view hidden='{{flase}}'>
<view>我是小心心</view>
</view>
hidden为flase的时候表示不隐藏,true表示隐藏,包裹数据时候可以使用单引号也可以使用双引号
同样假如不使用{{}}数据绑定,那么填写任意字符均认为true
因为 wx:if
之中的模板也可能包含数据绑定,所以当 wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if
也是惰性的,如果在初始渲染条件为 false
,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if
有更高的切换消耗而 hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if
较好。