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

news/2024/7/20 1:43:29 标签: 小程序, 前端, javascript

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

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

  1. wx:if:使用 wx:if 可以根据条件动态地添加或删除一个节点及其子节点。当条件为真时,该节点会被渲染到页面上;当条件为假时,该节点会从 DOM 树中移除。每次条件发生变化时,都会重新进行渲染和构建 DOM 树
    
    <view wx:if="{{condition}}">
      <!-- 根据条件渲染的内容 -->
    </view>
  2. hidden:使用 hidden 可以隐藏或显示一个节点,但它不会改变 DOM 树的结构。当条件为真时,节点仍然存在于 DOM 树中,只是设置了 CSS 的 display: none 属性,从而使其在页面上不可见;当条件为假时,节点会显示出来
    <view hidden="{{!condition}}">
      <!-- 根据条件隐藏或显示的内容 -->
    </view>

    区别:

  3. wx:if 在条件为假时会从 DOM 树中移除节点,重新渲染时会重新构建节点,因此在条件频繁变化的场景下,性能较低
  4. hidden 仅控制节点的显示与隐藏,不会改变 DOM 结构,性能较好。但在隐藏的节点上可能会触发事件、占用内存等,需要额外注意

http://www.niftyadmin.cn/n/5295867.html

相关文章

个人游戏启动器 | 游戏数据库 playnite 折腾记录

环境&#xff1a;Windows 11 问题&#xff1a;使用平板串联PC游戏后&#xff0c;需要一个本地的PC启动器 解决办法&#xff1a;使用playnite搭配插件 背景&#xff1a;我是个单机游戏爱好者&#xff0c;因为某些原因&#xff0c;需要串流游玩&#xff0c;需要一个方便手柄操作的…

conda环境下nvrtc: error: invalid value for --gpu-architecture解决方法

1 问题描述 在运行视频处理的模型过程中&#xff0c;出现如下异常&#xff1a; nvrtc: error: invalid value for --gpu-architecture (-arch)nvrtc compilation failed: #define NAN __int_as_float(0x7fffffff) #define POS_INFINITY __int_as_float(0x7f800000) #define N…

普中STM32-PZ6806L开发板(STM32CubeMX创建项目并点亮LED灯)

简介 搭建一个用于驱动 STM32F103ZET6 GPIO点亮LED灯的任务;电路原理图 LED电路原理图 芯片引脚连接LED驱动引脚原理图 创建一个点亮LED灯的Keil 5项目 创建STM32CubeMX项目 New Project -> 单击 -> 芯片搜索STM32F103ZET6->双击创建 初始化时钟 调试设置 一…

Java EE Servlet之Servlet API详解

文章目录 1. HttpServlet1.1 核心方法 2. HttpServletRequest3. HttpServletResponse 接下来我们来学习 Servlet API 里面的详细情况 1. HttpServlet 写一个 Servlet 代码&#xff0c;都是要继承这个类&#xff0c;重写里面的方法 Servlet 这里的代码&#xff0c;只需要继承…

游戏加速器LSP/DLL导致WSL.EXE无法打开问题修复!

解决办法&#xff1a; https://github.com/microsoft/WSL/issues/4177#issuecomment-597736482 方法一&#xff1a;&#xff08;管理员身份&#xff09; netsh winsock reset 方法二&#xff1a; WSCSetApplicationCategory 函数设置LSP加载权限 bool NoLsp(const wchar_t* …

vr体验馆用什么软件计时计费,如遇到停电软件程序如何恢复时间

vr体验馆用什么软件计时计费&#xff0c;如遇到停电软件程序如何恢复时间 一、软件程序问答 如下图&#xff0c;软件以 佳易王vr体验馆计时计费软件V17.9为例说明 1、软件如何计时间&#xff1f; 点击相应编号的开始计时按钮即可 2、遇到停电再打开软件时间可以恢复吗&…

MCS-51单片机的中断源

目录 MCS-51中断源&#xff1a; 中断控制&#xff1a; 1.定时控制寄存器&#xff08;TCON&#xff09; 2.串行口控制寄存器&#xff08;SCON&#xff09; 3.中断允许寄存器(IE) 4.中断优先级控制寄存器(IP) 中断处理: 中断采样&#xff1a; 中断查询&#xff1a; 中断…

【12.30】转行小白历险记-刷算法06

01补充一下&#xff1a;哈希表的基础知识 1. 创建哈希表 在 JavaScript 中&#xff0c;您可以使用对象或 Map 来创建一个哈希表。 使用对象&#xff1a; let hashTable {};使用 Map 对象&#xff1a; let hashMap new Map();2. 插入键值对&#xff08;Add / Set&#xf…