微信小程序--23(条件渲染)

一、wx:if

1.作用

  • 来判断是否需要渲染

2.语句

  • wx:if = "{{condition}}"

  • 来判断是否需要渲染该代码块

  • wx:elif

  • wx:else

  • 用来添加else判断

3.演示

二、<block> +wx:if

1.作用

  • <block>标签:将多个组件包装起来
  • 一次性控制多个组件展示与隐藏

2.练习

  • 没有<block>
  • 有<block>

三、hidden

1.作用

  • 控制元素的显示与隐藏

2.语句

  • hidden ="{{condition}}"

3.练习

  • flag为false
  • flag为true

四、wx:if与hidden比较

1.运行方式不同

  • 前者动态创建和移除元素来控制元素的展示和隐藏
  • 后者以切换的方式

2.使用建议

频繁切换使用后者

控制条件比较复杂,使用前者结合wx:elif、wx:else进行切换

相关推荐
小蒜学长21 小时前
基于微信小程序的遇见咖啡店点餐系统设计与实现(代码+数据库+LW)
java·spring boot·后端·微信小程序·咖啡店点餐系统
今日热点21 小时前
小程序主体变更公证线上办理教程|2026 最新材料规范与审核避坑
小程序
Ai-_Man21 小时前
从聊天框到正式文档:AI导出鸭瞄准AI大模型应用的“最后一公里”
开发语言·前端·javascript·人工智能·小程序
省钱兄--zs1 天前
北京24小时自助健身房系统软件开发实战:从架构设计到部署指南
java·数据仓库·spring boot·小程序·需求分析
Ai-_Man1 天前
您您这可以把Grok的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑
光影少年2 天前
Taro 是如何解析入口配置 app.config.ts 和页面配置的?
微信小程序·小程序·typescript·reactjs·百度小程序·taro
用户788477316342 天前
门店核销闭环:小程序扫码 + .NET 幂等接口 + WPF 看板,一天能跑通
微信小程序·c#
DS小龙哥2 天前
从呼吸心率到离床报警:60G雷达睡眠仪全栈开发实录(硬件+MQTT+小程序)DIY一台全功能睡眠监护仪
stm32·单片机·嵌入式硬件·物联网·小程序·智能家居
扶风ff2 天前
练题簿在线免费刷题:刷题、背题、错题复习,一个小程序安排日常备考
学习·小程序
扶风ff2 天前
练题簿在线免费刷题:共享题库、学习任务、在线考试,岗位培训更方便
学习·小程序