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

相关推荐
海天胜景20 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘40 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾44 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
The_era_achievs_hero2 小时前
微信小程序41~50
微信小程序·小程序
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html