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

相关推荐
前端小巷子9 分钟前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia22 分钟前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.25 分钟前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia35 分钟前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
charlie11451419142 分钟前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头43 分钟前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
yenggd44 分钟前
3种XSS攻击简单案例
前端·xss
盖头盖1 小时前
【xss基本介绍】
前端·xss
微三云-轩1 小时前
区块链系统:解决549 亿元积分商城是否违法的问题
大数据·小程序·重构·区块链·生活
一枚前端小能手1 小时前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript