WXML 模板语法③条件渲染-微信小程序开发(九)
2022/8/12 1:26:19
本文主要是介绍WXML 模板语法③条件渲染-微信小程序开发(九),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
条件渲染
1. wx:if
在小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:
<view wx:if="{{ condition }}"> True </view>
也可以用 wx:elif 和 wx:else 来添加 else 判断:
<view wx:if="{{ type ===1 }}"> 男 </view> <view wx:elif="{{ type ===2 }}"> 女 </view> <view wx:else> 保密 </view>
2. 结合 使用 wx:if
如果要一次性控制多个组件的展示与隐藏,可以使用一个
<block wx:if="{{ true }}"> <view> view1 </view> <view> view2 </view> </block>
注意:
3. hidden
在小程序中,直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏:
<view hidden="{{ condition }}"> 条件为true隐藏,条件为false显示 </view>
4. wx:if 与 hidden 的对比
① 运行方式不同
⚫ wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
⚫ hidden 以切换样式的方式(display: none/block;),控制元素的显示与隐藏
② 使用建议
⚫ 频繁切换时,建议使用 hidden
⚫ 控制条件复杂时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
这篇关于WXML 模板语法③条件渲染-微信小程序开发(九)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具
- 2023-11-1952天学习微信小程序计划No.1:小程序简介