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

相关推荐
爱勇宝2 小时前
我做了一个亲子成长小程序:想把“催孩子”变成“看见孩子”
微信小程序·产品·全栈
biwenyunnet4 小时前
【99做小程序只认餐宝盈】连锁餐饮小程序怎么做:从系统架构、技术选型到表结构与接口设计的完整实践
小程序·系统架构
27669582925 小时前
拼多多m端/小程序 encrypt_info
java·小程序·apache·encrypt_info·encrypt_info解密·拼多多小程序·拼多多m端
克里斯蒂亚诺更新6 小时前
微信小程序体验版可以获取当前位置但是正式版不可以-办法解决
微信小程序·小程序
巴巴博一6 小时前
uni-app / 微信小程序中 open-type=“share“ 按钮样式异常,和普通 view 无法齐平的解决方案
微信小程序·uni-app·notepad++
资深前端之路6 小时前
微信小程序节点最大限制为5000个
微信小程序·小程序
cosinmz8 小时前
PDF 发票合并经验分享:月初高效整理发票的实用方法
经验分享·小程序·pdf·pdf转换·pdf发票合并·发票合并打印
wuxia211816 小时前
微信小程序单击元素切换元素的显示和隐藏
javascript·微信小程序·setdata
2501_9160074719 小时前
前端开发常用软件与工具全面指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915909061 天前
iOS应用性能优化:十大策略提升用户体验与开发效率
android·ios·小程序·https·uni-app·iphone·webview