小程序中如何进行条件渲染?
1. 使用wx:if,wx:else和wx:elif实现条件渲染
<view wx:if="{{score > 90}}">
<text>优秀!</text>
</view>
<view wx:elif="{{score > 60}}">
<text>及格了!</text>
</view>
<view wx:else>
<text>还需努力!</text>
</view>
2. 结合block
和wx:if
来根据条件动态地显示或隐藏
<block wx:if="{{condition}}">
<text>这是第一段内容</text>
<text>这是第二段内容</text>
<image src="image.jpg" />
</block>
2. hiden实现条件渲染
<view>
<view hidden="{{flag}}">
这段文本只有在 flag 为 false 时才会显示
</view>
<view hidden="{{!flag}}">
这段文本只有在 flag 为 true 时才会显示
</view>
</view>
对比分析
因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。