WXML 模板语法 - 条件渲染

WXML 模板语法 - 条件渲染

在小程序中，我们可以根据条件来控制某些代码块的显示与隐藏。常用的条件渲染方式有：

1. wx:if

使用 wx:if 可以根据条件来控制代码块的显示与隐藏。示例代码如下：

<view wx:if="{{condition}}">True</view>

其中，condition 是一个布尔类型的变量或表达式。如果 condition 为 true，则这个 view 组件会被渲染出来，否则不会被渲染。

我们也可以通过 wx:elif 和 wx:else 来添加条件分支，示例代码如下：

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

其中，wx:elif 和 wx:else 都是在 wx:if 的条件不成立时才会执行的。

2. wx:if 结合 <block> 使用

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

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

在这个示例中，如果 wx:if 属性的值为 true，则 <block> 标签内部的两个 <view> 组件也会被渲染出来。

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

3. hidden

我们也可以使用 hidden 属性来控制元素的显示与隐藏，示例代码如下：

<view hidden="{{condition}}">条件为 true 隐藏，条件为 false 显示</view>

其中，condition 是一个布尔类型的变量或表达式。如果 condition 为 true，则这个 view 组件会被隐藏，否则会显示出来。

4. wx:if 与 hidden 的对比

• 运行方式不同

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏；hidden 则是以切换样式的方式（display: none/block;），控制元素的显示与隐藏。

• 使用建议

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