微信小程序--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 小时前
CSS常遇到自适应高度动画、带三角气泡阴影一行样式解决
css·微信小程序
yuanmenglxb20043 小时前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
编程毕设5 小时前
【含文档+PPT+源码】基于微信小程序连锁药店商城
微信小程序·小程序
幽络源小助理5 小时前
微信小程序鲜花销售系统设计与实现
微信小程序·小程序
换日线°7 小时前
CSS简单实用的加载动画、骨架屏有效果图
css·微信小程序
10年前端老司机7 小时前
微信小程序wxs
前端·javascript·微信小程序
halo14167 小时前
uni-app 小程序中的定位问题 以及 页面安全距离
小程序·uni-app
努力成为包租婆17 小时前
微信小程序 van-dropdown-menu
微信·微信小程序·小程序
thinkQuadratic19 小时前
微信小程序动态设置高度,添加动画等常用操作
微信小程序·小程序
中科三方20 小时前
APP和小程序需要注册域名吗?(国科云)
小程序·apache