在前面已经知道WXML中的动态数据来自于对应页面Page里的data，而data里面的数据无论是数字、字符串、数组、对象我们都可以将它们渲染到WXML页面，接下来我们会把data里面的数据作为条件来控制页面的渲染，而条件的核心就在于前面所说的布尔值Boolean是true还是false。
1 渲染的运算与逻辑判断
1、渲染的数字运算
在前面我们已经介绍过渲染的数字运算，这里我们再强调一下。使用开发者工具新建一个小程序页面，比如condition，然后再在condition.wxml里输入以下代码，页面有两个变量male和female，注意它们相加的方式：
<view>班级学生总数为：{
{male+female}}</view>
<!-- 下面两个的计算结果和上面是一样的哦 -->
<view>班级学生总数为：{
{22+9}}</view>
<view>班级学生总数为：{
{male+9}}</view>
然后再在condition.js文件的Page的data对象添加male和female的值，你可以任意填写数字类型的值，比如：
data:{
male:22,
female:9,
}
数字运算除了加+以外，还支持减-，乘*，除/，求余%。这里我们需要注意一下上面的写法与下面的写法的结果有什么不同：
<view>班级学生总数为：{
{male}}+{
{female}}</view>
前者显示的是学生总数为31，后者则显示为字符串的拼接22+9，在后面我们把动态数据作为渲染条件来进行运算的时候，注意都要写在{
{}}内，不然就成了字符串的拼接了。
2、逻辑判断控制代码块渲染
我们可以使用 wx:if="" 来判断是否需要渲染该代码块，比如我们可以在condition.wxml里输入下面的代码：
<view wx:if="{
{female > 5}}"> 如果女生人数多于5人就显示</view>
<view wx:if="{
{female > 10}}"> 如果女生人数多于10人就显示</view>
由于female的人数为9人，所以我们可以看到第一个代码块可以渲染，而第二个代码块却没有渲染，注意是整个代码块没有渲染。
3、比较运算符
上面的案例里的大于>就是一个比较运算符，WXML渲染支持一些JavaScript表达式语法，数字运算符和比较运算符就是JavaScript的语法在渲染里面的应用，在后面的章节我们会再来具体了解JavaScript的知识。由于这些运算符和我们中学时代的数学知识比较一致，所以相信大家能够很容易理解。
| 运算符 | 描述 | 比较 | 返回的结果 |
|---|---|---|---|
| > | 大于 | < | 小于 |
| >= | 大于或等于 | <= | 小于或等于 |
| == | 等于 | === | 值相等并且类型相等 |
| !== | 值不相等或类型不相等 | != | 不相等 |
wx:if="{
{female > 5}}"和wx:if="{
{female > 10}}"的本质是里面的条件的布尔值为true还是false，如果为true就渲染，为false就不渲染。而比较运算符返回的结果就是布尔值。比如：
<view wx:if="{
{female < 10}}"> 女生的人数为9，小于10结果为true</view>
<view wx:if="{
{female >= 9}}"> 女生的人数为9，大于等于9结果为true</view>
<view wx:if="{
{female !== 5}}"> 女生的人数为9，不等于5结果为true</view>
比较运算符有等于==和全等===的区别，等于不考虑值的类型，而全等则要求类型和值都需要相同。比如我们再在condition.wxml输入以下代码：
<view wx:if="{
{female == 9}}">数字9与字符串9是不同的，但是等于不考虑类型</view>
<view wx:if="{
{female === 9}}">数字9与字符串9是不同的，但是全等考虑类型</view>
我们发现这两个都是可以显示的，但是我们把condition.js里的data，修改为如下，也就是修改female的类型，下面的全等就不显示啦
female:'9',
思考并实践一下，
{ {female == 9}}和{ {female === 9}}与{ {female}} == 9和{ {female}} === 9有什么区别，结果会有什么不同？
4、block判断多个组件标签
因为 wx:if 是一个控制属性，需要将它添加到一个组件标签上，比如前面的view组件。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{
{show}}">
<view> 内容一 </view>
<view> 内容二</view>
</block>
<block/> 并不是一个组件，它仅仅只是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
WXML里面的代码是固定的，而JS文件里面的data数据是动态的，在后面的章节我们会讲到如何根据不同的用户、不同的场景、不同的操作来修改data里面的数据。data里面的数据是动态的，而条件渲染又能通过上面的方式控制WXML页面的代码块的渲染，因此我们也能实现根据不同的情况在小程序端显示不能的渲染结果。
2、布尔运算的渲染
1、简单的布尔运算
当然我们可以直接在Page的对象里，让参数的值直接为布尔型，比如下面的案例，在condition.wxml里输入下面的代码：
<view wx:if="{
{show}}">通过data里面的布尔值来控制是否显示</view>
再在condition.js文件的Page的data对象添加show的布尔值，你可以设置show的值为true或者false，看看condition页面的代码块的渲染情况：
data:{
show:true
}
其实我们将show的值设置为非0的数字、非空字符串、非空数组等的时候，上面的view组件还是会显示，这是因为if的条件的核心在于判断值==的布尔真假值：
show:1,//数字不是0，因为1==true
show:'yes',//字符串非空，因为'yes'==true
show:["ok"],//非空数组，因为["ok"]==true
2、逻辑运算符
前面的案例只涉及到一个条件的判断，我们还可以根据多个条件来动态渲染，多条件判断有两种情况，一种是逻辑运算符，还有一种是else的写法。
逻辑运算符有逻辑或||（满足其中一个条件即可）、逻辑与$$（满足所有条件才行）、逻辑非!（与条件相反），逻辑运算符通常用于布尔运算测试真假值，常用于条件、循环等语句。
<view wx:if="{
{ female>10 || male>10 }}">女生9人，female>10为false，男生22人，male>10为true，逻辑或满足其中一个条件即可，所以这个会显示</view>
<view wx:if="{
{ female>10 && male>10 }}">逻辑与必须满足所有条件，所以这个不显示</view>
<view wx:if="{
{ !female }}">女生数为9人，数字非0所以是true，与true相反条件即为false，所以不显示</view>
3、逻辑非（!）和双重非（!!）运算符
前面我们已经说过，值为非0的数字、非空字符串、非空数组等的时候，它们== true就是true，那它们的逻辑非就是false，我们可以打开微信开发者工具的调试器的Console，将代码输入到Console里来判断：
!0 // 返回true
!true // 返回false
!false // 返回true
!'' // 返回true
!'yes' // 返回false
!["ok"] // 返回false
!{} // 返回false
如果你觉得这些理论知识特别复杂难以理解（不要死记硬背哦），你可以在配图的Console控制台里打印一下就能得到结果。
我们还可以使用双重非运算符显式地将任意值强制转换为其对应的布尔值，以下的结果同样也可以在Console控制台打印得到：
!!true // 返回true
!!{} // 返回true，
!!false // 返回false
!!"" // 返回false
这些布尔运算有什么用呢？我们可以用来判断数据是不是空，比如用户是否登录？用户在数据库里是否留有信息？查询是否有结果？图片、链接等资源是否存在？等等。
3 hidden的用法
1、hidden属性的用法
组件都有公共属性，而其中公众属性hidden也是可以控制微信小程序中组件的显示与否。hidden为false组件显示，hidden为true组件隐藏。值得注意的是hidden在隐藏时仍然渲染，只是不呈现。在condition.wxml输入以下代码：
<view wx:if="{
{false}}">组件不显示不渲染</view>
<view hidden="{
{true}}">组件不显示</view>
<view hidden>组件不显示</view>
<view hidden="{
{false}}">组件显示</view>
从配图可以看到wx:if="{
{false}}"不会渲染组件，而hidden="{
{false}}"仍会渲染组件，但是在小程序端却不显示。
2、wx:if vs hidden
因为wx:if之中的模板也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
4 多条件判断与三元运算符
1、wx:elif 和 wx:else
我们可以用wx:elif和wx:else来添加else条件块，用于处理多个不同的条件情况：
<view wx:if="{
{female > 22}}">理工科班级女生人数居然大于15人</view>
<view wx:elif="{
{female < 9}}">理工科班级女生人数太少</view>
<view wx:else>男女比例大致协调</view>
2、三元运算符
三元运算符是JavaScript仅有的使用三个操作数的运算符。一个条件后面会跟一个问号?，如果条件为true ，则问号后面的表达式A将会执行；表达式A后面跟着一个冒号:，如果条件为false ，则冒号后面的表达式B将会执行。
<view hidden="{
{login ? true : false}}">用户登录时不显示，没有登录才显示</view>
不推荐
wx:if和wx:for一起使用，当它们一起使用时，wx:for具有比wx:if更高的优先级。WXML还支持一些JavaScript的语法，比如wx:if="Math.random()>0.5"，比如message的值为Hello World，经过JavaScript的字符串处理wx:if="message.split(' ')[0].toLowerCase()=='hello'条件也为true，更多JavaScript的知识在后面会有介绍。