小程序学习（六）

条件渲染的学习

参考链接：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

何为条件渲染呢？顾名思义，也就是在条件成立时组件才渲染生成。在对于这个模块的学习中，我们会讲到wx:if属性
的使用。
在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

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

就拿我们前面学习讲过的例子继续讲解，我们想在每周推荐的视图中，有一个强烈推荐的红色标记文字显示，先在wekk.js文件中增加isHighlyRecommened:true这行代码，接着在week.wxml文件中加入我们想要显示的元素，

加入这串代码后，我们虽然能在视图中看到强烈推荐的红色标记文字，但我们想要实现的效果是根据实际的返回的数据中的isHighlyRecommened的值是否为true来决定是否渲染生成，因此此时就需要wx:if属性做数据绑定来渲染生成，

当值为true时，渲染生成条件成立，元素被渲染生成。

在这里，再补充对比一下wx:if 和 hidden这两个属性的区别：
（1）因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
（2）同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
（3）相比之下，hidden 就简单的多，在使用hidden属性时，元素总是要先被渲染生成的，该属性只是控制了其可见性而已。

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