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

相关推荐
草木红1 小时前
微信小程序:用户拒绝小程序获取当前位置后的处理办法
微信小程序·小程序
mon_star°3 小时前
旅游类小程序界面设计
微信小程序·旅游
草木红7 小时前
微信小程序状态管理与计算属性同时使用:miniprogram-computed 和 mobx-miniprogram
微信小程序·小程序
superJane9 小时前
column-count 瀑布流翻车记
前端·css·微信小程序
睡不着的可乐9 小时前
uniapp 微信小程序 手机号快速验证组件 解密 encryptedData 获取手机号
前端·微信小程序·typescript
mon_star°10 小时前
30天搭建消防安全培训小程序
微信小程序·小程序·微信公众平台
前端开发呀11 小时前
uniapp 列表渲染性能优化实践
前端·微信小程序
十年之少13 小时前
渲染模式、基础组件、矢量图、样式设置——微信小程序学习笔记
笔记·学习·微信小程序
说私域14 小时前
知乎平台搜索引擎引流策略与“开源AI大模型AI智能名片S2B2C商城小程序源码“的深度融合研究
人工智能·搜索引擎·微信·小程序·开源·零售