获取DOM 节点的四大方式
前言:
在 Vue 中,获取 DOM 节点可以通过多种方式,如自定义属性、ref 引用、类选择器和 ID 选择器等。
一、使用 ref 获取 DOM 实例
ref 是 Vue 中推荐的获取 DOM 节点的方式,它为每个节点分配一个唯一的引用,可以直接访问该 DOM 元素。
//vue2的写法
<template><div><!-- 通过 ref 绑定 DOM --><div ref="myDiv">这是一个 div</div><button @click="getRefElement">获取 ref 实例</button></div>
</template><script>
export default {methods: {getRefElement() {// 通过 this.$refs 访问 DOM 元素console.log(this.$refs.myDiv);},},
};
</script>
//vue3的写法
<template><div><div ref="myDiv">这是一个 div</div><button @click="getRefElement">获取 ref 实例</button></div>
</template><script setup>
import { ref, onMounted } from 'vue';// 创建一个 ref
const myDiv = ref(null);function getRefElement() {// 使用 .value 来访问 DOM 节点console.log(myDiv.value);
}
</script>
二、使用自定义属性选择器
可以为 DOM 元素添加自定义属性,然后使用 querySelector 或 querySelectorAll 来获取该元素。
//vue2的写法
<template><div><!-- 使用自定义属性 data-my-attr --><div data-my-attr="example">这是一个 div</div><button @click="getCustomAttribute">获取自定义属性的元素</button></div>
</template><script>
export default {methods: {getCustomAttribute() {// 使用 querySelector 选择自定义属性const element = this.$el.querySelector('[data-my-attr="example"]');console.log(element);},},
};
</script>
//vue3的写法
<template><div><div data-my-attr="example">这是一个 div</div><button @click="getCustomAttribute">获取自定义属性的元素</button></div>
</template><script setup>
import { onMounted } from 'vue';let customElement = null;function getCustomAttribute() {console.log(customElement);
}// 使用 onMounted 确保 DOM 渲染完成后获取节点
onMounted(() => {customElement = document.querySelector('[data-my-attr="example"]');
});
</script>
三、使用类选择器获取元素
类选择器可以用于获取 DOM 节点。注意,如果是多个元素的类,可以使用getElementsByClassName或者querySelectorAll 来获取所有匹配的元素。
//vue2写法
<template><div><!-- 使用类选择器 --><div class="my-class">第一个元素</div><div class="my-class">第二个元素</div><button @click="getClassElements">获取类选择器的元素</button></div>
</template><script>
export default {methods: {getClassElements() {// 获取具有类名 "my-class" 的所有元素const elements = this.$el.querySelectorAll('.my-class');elements.forEach((element) => console.log(element));},},
};
</script>
//vue3的写法
<template><div><div class="my-class">第一个元素</div><div class="my-class">第二个元素</div><button @click="getClassElements">获取类选择器的元素</button></div>
</template><script setup>
import { onMounted } from 'vue';let classElements = [];function getClassElements() {classElements.forEach((element) => console.log(element));
}onMounted(() => {// 使用类选择器选择所有元素classElements = document.querySelectorAll('.my-class');
});
</script>
四、使用 ID 选择器获取元素
ID 在页面中应该唯一,可以通过 querySelector或者getElementById直接获取该元素。
// vue2的写法
<template><div><!-- 使用 ID 选择器 --><div id="my-unique-id">这是一个 div</div><button @click="getIdElement">获取 ID 选择器的元素</button></div>
</template><script>
export default {methods: {getIdElement() {// 使用 querySelector 选择 IDconst element = this.$el.querySelector('#my-unique-id');console.log(element);},},
};
</script>
//vue3的写法
<template><div><div id="my-unique-id">这是一个 div</div><button @click="getIdElement">获取 ID 选择器的元素</button></div>
</template><script setup>
import { onMounted } from 'vue';let idElement = null;function getIdElement() {console.log(idElement);
}onMounted(() => {// 使用 ID 选择器获取元素idElement = document.querySelector('#my-unique-id');
});
</script>
五、总结
ref:推荐方式,使用this.$refs.refName获取元素。- 自定义属性选择器:使用
this.$el.querySelector('[data-attr="value"]')。 - 类选择器:使用
this.$el.querySelectorAll('.class-name')。 - ID 选择器:使用
this.$el.querySelector('#id-name')。
相关文章:
获取DOM 节点的四大方式
前言: 在 Vue 中,获取 DOM 节点可以通过多种方式,如自定义属性、ref 引用、类选择器和 ID 选择器等。 一、使用 ref 获取 DOM 实例 ref 是 Vue 中推荐的获取 DOM 节点的方式,它为每个节点分配一个唯一的引用,可以直…...
ROS2 Humble 机器人建模和Gazebo仿真
一.Ubuntu22.04系统虚拟机安装 1.下载镜像并安装 Index of /ubuntu-releases/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 2.安装选英文版,安装类型选清除磁盘。 3.遇到无法复制windows内容到虚拟机里。需安装VMware tools。VMware tools安装不了&a…...
docker容器镜像的制作、使用以及传递
目录 制作容器镜像使用Dockerfile制作镜像准备所需文件构建镜像怎么不使用基础镜像来构建容器镜像 使用容器镜像传递容器镜像 这篇文章讨论一下怎么使用docker制作容器镜像,容器镜像的使用,以及怎么传递容器镜像。 制作容器镜像 docker制作容器镜像推荐…...
一种由于吸入硅酸盐粉尘而引起的肺部疾病:pneumonoultramicroscopicsilicovolcanoconiosis
有人说,pneumonoultramicroscopicsilicovolcanoconiosis是英语中最长的单词,这是一个医学词汇,意思是指:一种由于吸入硅酸盐粉尘而引起的肺部疾病。 pneumonoultramicroscopicsilicovolcanoconiosis [ˈnju:mənəuˌʌltrəˌmai…...
百度AI人脸检测与对比
1.注册账号 打开网站 https://ai.baidu.com/ ,注册百度账号并登录 2.创建应用 3.技术文档 https://ai.baidu.com/ai-doc/FACE/yk37c1u4t 4.Spring Boot简单集成测试 pom.xml 配置: <!--百度AI--> <dependency> <groupId>com.baidu.…...
贴代码框架PasteForm特性介绍之outer,outers,object,objects,outerdisplay
简介 PasteForm是贴代码推出的 “新一代CRUD” ,基于ABPvNext,目的是通过对Dto的特性的标注,从而实现管理端的统一UI,借助于配套的PasteBuilder代码生成器,你可以快速的为自己的项目构建后台管理端!目前管…...
sql数据库-权限控制-DCL
目录 常用权限类别 查询用户权限 举例 授予用户权限 删除权限 常用权限类别 权限说明ALL,ALL PRIVILEGES所有权限SELECT查询数据INSERT插入数据UPDATE修改数据DELETE删除数据ALTER修改表DROP删除数据库/表/视图CREATE创建数据库/表 查询用户权限 show grants for 用户名…...
【计组笔记】目录
【计组笔记】机器数表示及运算https://blog.csdn.net/Resurgence03/article/details/142673325?sharetypeblog&shareId142673325&sharereferAPP&sharesourceresurgence03&sharefromlink 【计组笔记】指令系统https://blog.csdn.net/Resurgence03/article/det…...
深度学习中的Pixel Shuffle和Pixel Unshuffle:图像超分辨率的秘密武器
在深度学习的计算机视觉任务中,提升图像分辨率和压缩特征图是重要需求。Pixel Shuffle和Pixel Unshuffle是在超分辨率、图像生成等任务中常用的操作,能够通过转换空间维度和通道维度来优化图像特征表示。本篇文章将深入介绍这两种操作的原理,…...
AntFlow 0.11.0版发布,增加springboot starter模块,一款设计上借鉴钉钉工作流的免费企业级审批流平台
AntFlow 0.11.0版发布,增加springboot starter模块,一款设计上借鉴钉钉工作流的免费企业级审批流平台 传统老牌工作流引擎比如activiti,flowable或者camunda等虽然功能强大,也被企业广泛采用,然后也存着在诸如学习曲线陡峭,上手难度大&#x…...
golang操作mysql基础驱动github.com/go-sql-driver/mysql使用
golang中类似java操作mysql的jdbc一样,github.com/go-sql-driver/mysql也为go提供了基础接口,在开发中往往需要写更多的代码来满足自己的定制需求,java在驱动基础上有了扩展,orm框架诞生,mybatis、jpa等都是好用的扩展…...
正则表达式完全指南,总结全面通俗易懂
目录 元字符 连接符 限定符 定位符 修饰符(标记) 运算符优先级 普通字符集及其替换 零宽断言 正向先行断言 负向先行断言 正向后发断言 负向后发断言 捕获组 普通捕获组 命名捕获组 PS:非捕获组 正则表达式在线测试: 正则在线测试工具 …...
运维面试题.云计算面试题之三ELK
1.ELK是什么? ELK 其实并不是一款软件,而是一整套解决方案,是三个软件产品的首字母缩写 Elasticsearch:负责日志检索和储存 Logstash:负责日志的收集和分析、处理 Kibana:负责日志的可视化 这三款软件都是开源软件,通常是配合使用,而且又先后归于 Elastic.co 公司名下,…...
C# DataTable使用Linq查询详解
前奏- C# 对DataTable进行查询 C# 可以对 DataTable 进行查询。在 .NET 框架中,DataTable 类提供了几种方法来查询数据,包括 Select 方法和 AsEnumerable 扩展方法(在 System.Data.DataSetExtensions 命名空间中)。 使用 Select…...
【企业级分布式系统】ELK优化
文章目录 Elasticsearch作为日志存储时的优化优化ES索引设置优化线程池配置锁定内存,不让JVM使用Swap减少分片数、副本数 Elasticsearch作为日志存储时的优化 linux内核优化、JVM优化、ES配置优化、架构优化(filebeat/fluentd代替logstash、加入kafka做…...
51单片机基础05 定时器
目录 一、为什么要定时器 二、定时器中断 1、定时器中断参数 2、定时器中断程序 3、定时器计数 一、为什么要定时器 前文提到,比如进行流水灯等操作,都是直接写了delay_ms这类操作。 但是在51单片机中,其一般就是靠双for进行的循环时延&…...
tdengine学习笔记实战-jdbc连接tdengine数据库
先上代码,里面有两种获取连接的方式,一个单例,一个连接池 package com.tdengine.utils;import com.alibaba.druid.pool.DruidDataSource;import java.sql.*; import java.util.Properties;public class TDConnectUtils {// 单例对象private …...
vue3项目执行npm install下载依赖报错问题排查方法
1、检查当前node与npm的版本 nodejs 和 npm 的版本是有适配的,具体可以看官网:nodejs 和 npm 的版本是有适配的 若是版本不兼容,修改node或者npm的版本即可,建议使用nvm版本管理工具,切换方便; 2、清除缓…...
【vue】项目迭代部署后 自动清除浏览器缓存
前言: vue项目打包部署上线后,因浏览器缓存问题,导致用户访问的依旧是上个迭代批次的旧资源,需要用户手动清除缓存才能更新至最新版本,影响用户体验。 解决方法: html根文件添加以下标签 <meta http-eq…...
Leetcode(滑动窗口习题思路总结,持续更新。。。)
讲解题目:长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 target ,找出该数组中满足其和 ≥ target 的长度最小的连续子数组。如果不存在符合条件的连续子数组,返回 0。示例: 输入: target 7, nums [2,3,1,2,4,3] 输出: 2 解…...
AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项: 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库: npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent
安全大模型训练计划:基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标:为安全大模型创建高质量、去偏、符合伦理的训练数据集,涵盖安全相关任务(如有害内容检测、隐私保护、道德推理等)。 1.1 数据收集 描…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的:a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
