微信小程序中wx-if的用法

>wx-if用来显示和隐藏

<view wx-if="false">我隐藏了</view>

<view wx-if="true">我隐藏了</view>

>wx:if用来判断

<view wx:if="{{length >19}}">20</view>

<view wx:elif="{{length >16}}">15</view>

<view wx:else>0</view>

多个条件：

<view wx:if="{{ !a }}">逻辑非</view>

<view wx:if="{{ a || b }}">逻辑或</view>

<view wx:if="{{ a &&b }}">逻辑与</view>

1

2

3

wx:if else 的判断

<view wx:if="{{ a >5 }}">6</view>

<view wx:elif="{{ a <5 }}">4</view>

<view wx:else>5</view>

1、wx:if :  有更高的切换消耗。条件不成立，不会生成节点，使用wx:if，显示结果渲染，不显示不渲染。

2、hidden : 有更高的初始渲染消耗。无论成不成立都是生成节点隐藏，刚开始对服务器开销大，后面就小了。 

使用场景：

1、频繁切换使用 hidden

2、运行时条件变化使用wx: if

---