【微信小程序】条件渲染

✅作者简介：CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆 📃个人主页：hacker707的csdn博客 🔥系列专栏：微信小程序🥇 💬个人格言：不断的翻越一座又一座的高山，那样的人生才是我想要的。这一马平川，一眼见底的活，我不想要,我的人生，我自己书写，余生很长，请多关照，我的人生，敬请期待💖💖💖

在这里插入图片描述

条件渲染

• wx:if
• 结合<block>使用wx:if
• hidden
• wx:if与hidden的对比
• 结束语

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
    }
})

使用效果如下：

在这里插入图片描述

结合使用wx:if

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

<block wx:if="{{true}}">
    <view> view1 </view>
    <view> view2 </view>
</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的对比

🐱‍🏍运行方式不同 wx:if以动态创建和移除元素的方式，控制元素的显示与隐藏 hidden以切换样式的方式(display:none/block;)，控制元素的显示与隐藏 🐱‍🏍使用建议 频繁切换时，建议使用hidden 控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

结束语

以上就是微信小程序之条件渲染 持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序 你们的支持就是hacker创作的动力💖💖💖