????系列专栏:微信小程序 ????欢迎关注????点赞????收藏⭐留言???? ????个人主页:hacker_demo的51CTO博客 ????个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,请多关照,我的人生,敬请期待????????????
(条件渲染)
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的对比
????????运行方式不同 wx:if以动态创建和移除元素的方式,控制元素的显示与隐藏 hidden以切换样式的方式(display:none/block;),控制元素的显示与隐藏 ????????使用建议 频繁切换时,建议使用hidden 控制条件复杂时,建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换
结束语
以上就是微信小程序之条件渲染,创作不易多多支持???????????? 你们的支持就是hacker创作的动力????????????