小程序 – WXML – 条件渲染wx:if

简介

小程序中使用的条件渲染为 wx:if() , wx:elif() 和 wx:else().

条件渲染

wx:if

在小程序中，使用 wx:if="{{condition}}"  来判断是否需要渲染该代码块

<view wx:if="{{ true or false }}">wx:if 控制显示或隐藏</view>

也可以用 wx:elif  和 wx:else  来添加 else 判断：

<view wx:if="{{ sex=== 1 }}"> 男 </view>
<view wx:elif="{{ sex=== 2 }}"> 女 </view>
<view wx:else> 保密 </view>

结合 <block> 使用 wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来，并在<block> 标签上使用 wx:if 控制属性，示例如下：

<block wx:if="{{ true or false }}">
  <view> View 1</view>
  <view> View 2</view>
</block>

注意：<block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏

<view hidden="{{ true or false }}"> 使用 hidden 进行隐藏元素 </view>

wx:if 与 hidden 的对比

①运行方式不同

wx:if  以动态创建和移除元素的方式，控制元素的展示与隐藏

hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏

②使用建议

频繁切换时，建议使用 hidden

控制条件复杂时，建议使用 wx:if  搭配 wx:elif 、wx:else 进行展示与隐藏的切换