小程序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 结构,性能较好。但在隐藏的节点上可能会触发事件、占用内存等,需要额外注意

相关推荐
烛阴28 分钟前
Mix
前端·webgl
代码续发41 分钟前
前端组件梳理
前端
试图让你心动1 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码2 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记2 小时前
sass中@mixin与 @include
前端·sass
说私域2 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往2 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw2 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
陈琦鹏2 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数2 小时前
掌握JavaScript函数封装与作用域
前端·javascript