小程序中如何进行条件渲染？

1、wx:if=” ”实现条件渲染

（1）、
在框架中，使用wx：if=“ ”来判断是否渲染该代码块
如果box = true

<view wx:if=”{{box}}”></view>   //那么该代码块能在页面渲染出来

如果box = false

<view wx:if=”{{box}}”></view>   //那么该代码块就不能在页面渲染出来

（2）、
wx：if=“”也能结合着，wx:elif=” ”和wx:else来使用，此时可以进行多条件的判断是否渲染该代码
（3）、
例如：

Data：{
type : 1,
}
	<view wx:if="{{type===1}}">组件1</view>
	<view wx:elif="{{type===2}}">组件2</view>
	<view wx:else>组件3</view>

当type：1时，（组件1）该代码块显示,
然后，当我们改变type的值时就可以改变页面渲染的内容；

2、block结合wx：if使用

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
例如：

<block wx:if="{{true}}">
	  <view> view1 </view>
	  <view> view2 </view>
	</block>

注意：block不是一个组件，只是一个包裹性的容器，不会在页面上做任何渲染

3、hidden实现条件渲染

在框架中，使用 hidden=“” 来控制组件的显示与隐藏。与前面不同的是，hidden组件始终会被渲染，只是简单的控制显示与隐藏。（原理：通过display：none）
例如：

data：{
		flag：true，    
	}
<view hidden="{{flag}}">当条件为true时则会隐藏该元素</view>

我们可以通过改变flag的值，从而进行控制是否隐藏该组件

4、wx：if vs hidden （两种条件渲染的使用情景）

• 因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
• 同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
• 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
• 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden
  更好，如果在运行时条件不大可能改变则 wx:if 较好。