微信小程序中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>

wx:if 与hidden都可以控制微信小程序中的元素的显示与否。

先演示下两种方式的使用

wx:if 的使用

wx:if 还可以配合wx:else 使用，用来显示隐藏不同的控件

当isShow true显示test 隐藏test1；当isShow false时显示test1 隐藏test

hidden的使用

当isHidden true时 test隐藏 isHidden false时 test显示

wx:if 和hidden的差别

wx:if的隐藏是不渲染控件

hidden的隐藏是渲染控件，但是不显示

看下面效果

在xml布局中可以看到显示了三个控件，hidden隐藏的部分依然被渲染。

在实际开发过程中，如果频繁切换的话，用wx:if因为要频繁销毁和渲染，会消耗更多的资源。

如果不是频繁切换可以考虑使用wx:if，防止页面初始化时一下渲染那么多。

---