本章讲解的是模板语法的最后一种--条件渲染。设计主要的属性有两个

wx:if
hidden

这两个属性都能实现控制某一个标签切换显示的功能。

下面我们具体实操。

（一）wx:if 属性

此属性的基本表达式为

wx:if=  "{{true/false}}"

当{{}}内为true时，标签显示；当{{}}内为false时，标签隐藏。

比如：在demo03. wxml 文件中，敲下如下代码：

<view>
<view> 条件渲染 </view>
<view wx:if="{{true}}"> 显示 </view>
<view wx:if="{{false}}"> 隐藏 </view>
</view>

以上中，也可将true、 false 修改成变量形式，来实现对动态标签的切换显示。

保存后，左侧的界面显示如下：

除了wx:if 外，还有可替换属性，其功能都是一样的，

比如：wx: else 、wx: elif

其中，elif 等于 if else

下面，我们将wx:if 、wx: else 、wx: elif 这三个属性放在一起对比来看，

看如何使用，来实现对标签的切换和隐藏

代码如下：

<view>
<view wx:if="{{false}}"> 1 </view>
<view wx:elif="{{false}}"> 2 </view>
<view wx:else="{{false}}"> 3 </view>
</view>

保存后，结果只出现“3”

对比来看，可以看到，

wx:if 与 wx: elif 属性的功能和使用是一致的，

而 wx: else 属性则和其他两个正好相反，

所以，我们在使用时，一定要注意区分和选择。

（二）hidden 属性

我们在使用hidden 属性时，可以在标签中直接加入属性，不加任何值。

代码如下：

<view>
<view> --------------- </view>
<view hidden> hidden  </view>
<view> hidden  </view>
</view>

保存后，页面显示如下：

在hidden 属性中，也是可以加字符串的，基本表达式为：

hidden="{{true/ false}}"

在view标签中的代码如下：

<view>
<view hidden> hidden 1 </view>
<view hidden="{{true}}"> hidden 2</view>
</view>

保存后，界面是不显示任何结果的。

在上述代码中，若将 hidden="{{true}}" 修改为 hidden="{{false}}" 话，

<view>
<view hidden="{{false}}"> hidden 2</view>
</view>

保存后，界面线上的结果是 hidden 2

通过上面的例子，可以发现，以上的两种方式都能实现标签的显示/隐藏，但是里面具体的含义要注意区别。

（三）wx:if 与 hidden 的选择

当要频繁切换标签的状态（显示 or 隐藏）时，首选 wx：if 属性；

当不需要频繁切换标签时，首选 hidden 属性。

wx：if：直接把标签从页面结构中移除；

hidden : 增加样式的方式来切换显示。

比如：标签文件中写道：

<view>--00----</view>
<view wx:if="{{false}}"> wx:if </view>
<view hidden>hidden</view>

保存后，结果显示 --00----

检查调试器— wxml 选项— view 标签可看到，

<view >hidden</view> 存在，点击后发现右侧display none ，实现对 hidden 的隐藏。

所以，当 hidden 隐藏时，是通过增加样式标签来实现的。

在wxml中，没有发现 wx:if 标签，所以说，wx:if 已将标签移除；但是，又因为存在hidden，

从而增添了 display 样式。

因此，这提示我们，在使用 hidden 属性时，不能和 display 一同使用。

搜索并关注微信公众号：飞寝旺食

获取更多小程序运营干货、免费的开发教程、源代码等！

做小程序我们是认真的！