微信小程序开发学习笔记《4》WXML模板语法-条件渲染
博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。WXML语法-条件渲染官方文档
一、wx:if的使用
在小程序中,使用wx:if="{condition}}"来判断是否需要渲染该代码块:
<view wx:if="{{condition}}">True </view>
condition为判断条件;
只有当condition判断条件为真时,该view组件才会进行渲染,如果为假,该view组件则不会显示。
也可以用 wx:elif 和 wx:else 来添加一个 else 块:
<view wx:if="{{length == 1}}"> 性别男 </view>
<view wx:elif="{{length == 2}}"> 性别女 </view>
<view wx:else> 未知性别 </view>
其中“= =”为判断等于符号,但是会转换类型;
而“= = =”为严格判断等于,要求符号和类型全部一致。
示例:
这个示例中,我有两张美女图片,为其第一张绑定随机数(0或者1),第二章绑定随机数的取反。
这样的话,当随机数为1时,条件判断为真则展示第一张图,此时第二张图判断条件必然为假,则第二张图不展示;即这两张图只有一张能展示出来。
二、block wx:if的使用
因为 wx:if 是一个控制属性,需要将它添加到一个标签上。
如果要一次性判断多个组件标签,可以使用一个 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。
如图当role为学生时,展示第一个block下的多个学生view。
如果最外层改为别的组件包裹,似乎也能起到同样的作用。但是最外层的别的组件也会被渲染,就相当于多渲染了最外层这个容器。
注意: block并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。
三、hidden的使用
在小程序中,直接使用hidden="{{ condition }}“也能控制元素的显示与隐藏:
condition为判断条件;
只有当condition判断条件为真时,组件会隐藏,如果为假,该view组件则会显示。
图中view中,当hidden=”{{ true}}"时,则隐藏这个view,否则展示。
四、wx:if 对比 hidden
4.1 运行方式不同
wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
hidden 以切换样式的方式( display: none/block;),控制元素的显示与隐藏
可以看到图中,当令其两者不显示时,hidden其实是被渲染了,只是没有展示(display:none);而wx:if则是没有被渲染。
当令其两者显示时,wx:if则被添加渲染,而hidden不用重新渲染,因为他已经被渲染过了,只需要将display修改。
4.2 使用建议
频繁切换时,建议使用hidden
(因为如果使用wx:if,频繁切换会导致频繁动态创建和移除元素,浪费性能。使用hidden会提高渲染效率。)
控制条件复杂时,建议使用wx:if 搭配wx:elif、wx:else进行展示与隐藏的切换
以上学习笔记都是博主在B站学习黑马程序员课程时的学习笔记,如果有什么问题,烦请联系我删除。