【微信小程序】WXML语法 -- 条件渲染

条件渲染

一、wx:if

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

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

如果condition为true，则会在页面上展示出对应的view组件，否则不会显示。

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

<view wx:if="{{type === 1}}">用户</view>
<view wx:elif="{{type === 2}}">管理员</view>
<view wx:else>超级管理员</view>

如果type值为1，页面上会渲染出用户对应的view;
如果type值为2，页面上会渲染出管理员对应的view;
否则页面上会渲染出超级管理员对应的view;

二、结合block使用wx:if

如果需要同时控制多个组件的展示与隐藏，可以使用一个block标签将多个组件进行包装，并在标签上使用wx:if控制属性：

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

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

三、hidden

在微信小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏。
如果condition为true，则隐藏对应的元素；
如果condition为false，则显示对应的元素。

四、wx:if 与 hidden的对比

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

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