小程序WXML之条件渲染

女爷i 2023-10-17 09:01 126阅读 0赞

### wx:if ###

在MINA中，用来判断是否需要渲染该代码块，这个和java、C中if条件判断是一样的，语法格式：

`wx:if="{ {condition}}"`,双重大括号中是条件表达式

除了wx:if还可以用`wx:elif`和`wx:else`来添加一个else块，我们来看一个实例：

1.test.wxml文件

![Center][]

2.test.js文件

![Center 1][]

3.运行结果

![Center 2][]

大家可以去更换条件表达式的条件查看在不同条件下小程序的结果。

### block wx:if ###

因为`wx:if` 是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签，我们可以使用一个`<block/>`标签将多个组件包装起来，并在上边使用`wx:if`控制属性。基本用法都差不多，大家可以参看实例看一下

**注意：** `<block/>`并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

上写数据绑定有一个`hidden的用法，在三目运算时，现在跟大家说一下wx:if和hidden的区别，和什么时候用wx:if,什么时候该用hidden。`

因为`wx:if`之中的模板也可能包含数据绑定，所有当`wx:if`的条件值切换时，MINA有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时`wx:if`也是**惰性的**，如果在初始渲染条件为`false`，MINA什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，`hidden`就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说， `wx:if`有更高的切换消耗而 `hidden`有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 `hidden`更好，如果在运行时条件不大可能改变则 `wx:if`较好。

`最后希望各位客官老爷门给我一个继续写这个小程序技术贴的动力，也希望大家共同进步，帅气的客官可以扫一下下面的二维码给我捐点码字的银子，谢谢！！！`

[Center]: https://img-blog.csdn.net/20161014163703959?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20161014163407590?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20161014163528575?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center