微信小程序条件渲染

Posted 2022-10-13

(条件渲染)

wx:if

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

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

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

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

✅hacker.wxml

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

✅hacker.js

Page(
    data:
        type : 1
    
)

使用效果如下：

结合<block>使用wx:if

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

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

注意：<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染 ✅如果使用view组件进行包裹最外层的view也会被渲染

✅如果不想被渲染把最外层的view组件改成block容器即可

hidden

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

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

✅hacker.js

Page(
    data:
        flag: true
    
)

✅hacker.wxml

<view hidden="flag"> 条件为 true 隐藏元素，条件为 false 显示元素</view>

使用效果如下：

wx:if与hidden的对比