微信小程序开发学习笔记《4》WXML模板语法-条件渲染

微信小程序开发学习笔记《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站学习黑马程序员课程时的学习笔记，如果有什么问题，烦请联系我删除。