我们在开发小程序项目的时候，经常会用到wx:if属性，在框架中，使用wx:if=""来判断是否需要渲染该代码块，非常的实用，而对于刚接触小程序开发项目的开发者来说，可能还不是很了解这个属性，以及它和hidden有什么区别，今天一起和厦门在乎科技来了解一下吧。
微信小程序wx:if的使用：
在框架中，我们用wx:if="{{condition}}"来判断是否需要渲染该代码块：
<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>
block wx:if
注意：
实例：
wxml：使用view
<!--index.wxml-->
<button bindtap="EventHandle">按钮</button>
<!-- wx:if -->
<view wx:if="{{boolean==true}}">
<view class="bg_black"></view>
</view>
<view wx:elif="{{boolean==false}}">
<view class="bg_red"></view>
</view>
wxss：
/**index.wxss**/
.bg_black { height: 200rpx; background: lightskyblue; } .bg_red { height: 200rpx; background: lightpink; }
js：
// index.js
Page({ data: { boolean:false }, EventHandle: function(){ var bol = this.data.boolean; this.setData({ boolean: !bol }) } })
小程序wx:if和hidden的区别：
1.wx:if 是遇 true 显示，hidden 是遇 false 显示。
2.wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。
3.所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。
4.如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。
以上就是今天为大家带来的关于“微信小程序wx:if的使用 小程序wx:if和hidden的区别”全部内容，这里我们要注意的是，因为 wx:if
是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个
