微信小程序 - WXML 模板语法 - 条件渲染

1、wx:if

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

<view wx:if="{{condition}}"> luca view>
1

（2）在微信小程序中，还可以用 wx:elif 和 wx:else 来添加 else 判断，示例代码如下：

<view wx:if="{{type == 0}}"> 大 view>
<view wx:elif="{{type == 1}}"> 中 view>
<view wx:else> 小 view>
1
2
3

2、结合 使用 wx:if

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

<block wx:if="{{condition}}">
	<view> luca view>
	<view> hello view>
block>
1
2
3
4

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

3、hidden

（1）在微信小程序中，可以直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏，示例代码如下：

<view hidden="{{condition}}"> luca view>
1

4、wx:if 与 hidden 的对比

（1）运行方式不同

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

（2）使用建议

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