小程序wx:if 和hidden的区别?

在小程序中,wx:ifhidden 是用于条件渲染的两种不同方式。

选择使用哪种方式取决于具体情况。如果条件变化频繁或节点包含复杂的子节点,可以考虑使用 wx:if 进行条件渲染;如果条件变化较少且节点结构简单,可以使用 hidden 控制显示与隐藏

  1. wx:if:使用 wx:if 可以根据条件动态地添加或删除一个节点及其子节点。当条件为真时,该节点会被渲染到页面上;当条件为假时,该节点会从 DOM 树中移除。每次条件发生变化时,都会重新进行渲染和构建 DOM 树

    html 复制代码
    <view wx:if="{{condition}}">
      <!-- 根据条件渲染的内容 -->
    </view>
  2. hidden:使用 hidden 可以隐藏或显示一个节点,但它不会改变 DOM 树的结构。当条件为真时,节点仍然存在于 DOM 树中,只是设置了 CSS 的 display: none 属性,从而使其在页面上不可见;当条件为假时,节点会显示出来

    html 复制代码
    <view hidden="{{!condition}}">
      <!-- 根据条件隐藏或显示的内容 -->
    </view>

    区别:

  3. wx:if 在条件为假时会从 DOM 树中移除节点,重新渲染时会重新构建节点,因此在条件频繁变化的场景下,性能较低

  4. hidden 仅控制节点的显示与隐藏,不会改变 DOM 结构,性能较好。但在隐藏的节点上可能会触发事件、占用内存等,需要额外注意

相关推荐
2501_9160137410 分钟前
iOS 26 设备文件管理实战指南,文件访问、沙盒导出、系统变更与 uni-app 项目适配
android·ios·小程序·uni-app·cocoa·iphone·webview
RoyLin13 分钟前
SurrealDB - 统一数据基础设施
前端·后端·typescript
longlongago~~14 分钟前
富文本编辑器Tinymce的使用、行内富文本编辑器工具栏自定义class、katex渲染数学公式
前端·javascript·vue.js
2501_9159214317 分钟前
前端用什么开发工具?常用前端开发工具推荐与不同阶段的选择指南
android·前端·ios·小程序·uni-app·iphone·webview
aixfe21 分钟前
BiomeJS 2.0 忽略目录配置方法
前端
流***陌23 分钟前
求职招聘小程序:轻量化场景下的核心功能解析
小程序·求职招聘
Mintopia24 分钟前
Cesium-kit 又发新玩意儿了:CameraControl 相机控制组件全解析
前端·three.js·cesium
ssshooter24 分钟前
shader更换后,数据需要重新加载吗?
前端
拾缘26 分钟前
[elpis] 前端工程化:webpack 配置
前端·webpack
llq_35027 分钟前
用 Nginx 搭建前端本地预览环境
前端