微信小程序--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进行切换

相关推荐
h_654321012 小时前
微信小程序点击按钮跳转链接并显示
微信小程序·小程序
银迢迢15 小时前
微信小程序的开发及问题解决
微信小程序·小程序
liyinchi198815 小时前
原生微信小程序 textarea组件placeholder无法换行的问题解决办法
微信小程序·小程序
说私域17 小时前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的低集中度市场运营策略研究
人工智能·小程序·开源·零售
少恭写代码20 小时前
duxapp 2025-03-29 更新 编译结束的复制逻辑等
react native·小程序·taro
suncentwl21 小时前
答题pk小程序道具卡的获取与应用
小程序·答题小程序·知识竞赛
bysjlwdx21 小时前
uniapp婚纱预约小程序
小程序·uni-app
ALLSectorSorft1 天前
代驾小程序订单系统框架搭建
小程序·代驾小程序
qq_12498707531 天前
原生小程序+springboot+vue+协同过滤算法的音乐推荐系统(源码+论文+讲解+安装+部署+调试)
java·spring boot·后端·小程序·毕业设计·课程设计·协同过滤
前端极客探险家1 天前
微信小程序全解析:从入门到实战
微信小程序·小程序