Vue3 获取DOM元素总结-云帆数科

文章目录Vue3 获取DOM元素总结获取单个DOM获取多个DOM获取子组件的DOM方式一defineExpose方式二$elVue3 获取DOM元素总结获取单个DOMscript setup import {onMounted, ref} from vue; const boxRef ref(); onMounted(() { console.log(boxRef.value); boxRef.value.style.backgroundColor red; // 设置背景色 const myWidth boxRef.value.clientWidth; // 获取属性 console.log(myWidth); }); /script template div refboxRef/div /template style scoped div { width: 100px; height: 100px; margin: 10px; } /style获取多个DOM需要给 ref 绑定函数用于收集所有元素。script setup import {onMounted, ref} from vue; const itemRefs ref([]); const list ref([{id: 1, name: A}, {id: 2, name: B}, {id: 3, name: C}]); const setItemRef (el) { if (el) itemRefs.value.push(el); }; onMounted(() { for (const el of itemRefs.value) { console.log(el.innerText); } }); /script template ul li v-foritem in list :keyitem.id :refsetItemRef {{ item.name }} /li /ul /template style scoped div { width: 100px; height: 100px; margin: 10px; } /style获取子组件的DOM方式一defineExpose子组件需要调用 defineExpose 暴露DOM元素。子组件script setup import {ref} from vue; const boxRef ref(); defineExpose({boxRef}); /script template div refboxRef hello world /div /template父组件script setup import Child from /components/Child.vue; import {onMounted, ref} from vue; const childRef ref(); onMounted(() { const el childRef.value.boxRef; console.log(el.innerText); }); /script template Child refchildRef/ /template方式二$el可以通过 $el 获取组件的根DOMscript setup import Child from /components/Child.vue; import {onMounted, ref} from vue; const childRef ref(); onMounted(() { const el childRef.value.$el; console.log(el.innerText); }); /script template Child refchildRef/ /template

企业数字化 ERP 产品动态

相关推荐

2026年张家口当地知名Geo企业哪家专业？一文为你揭晓答案

在2026年这个人工智能全面普及的时代，AI.GEO（AI生成式引擎优化）作为全新迭代的全域智能获客新赛道，正成为企业数字化营销的核心布局。张家口的企业也在积极寻求专业的Geo企业合作，以解决传统获客难题，抢占人… · 2026/9/27 19:48:37

2026年珠海拱北夜生活指南： locals最爱的酒馆揭秘

珠海拱北作为珠海经济和社会发展的核心区域之一，在夜生活方面同样焕发着独特的魅力。2026年的珠海拱北不仅是商务和游客交流融合的舞台，更是一个让本地人放松身心的港湾。今天就要带你走进珠海拱北的夜晚，揭秘一个当地人最爱的特色酒馆——猫… · 2026/9/12 10:34:58

AD模块复用

原理设计方式一样。如果重复对每个模块布局和布线不仅耗时费力，而且模块也会不一致。下图则为原理一模一样的电路1.首先，根据原理来布置好第一个相同的模块2.点击右下角panels，选中PCB LIST。3.在PCB List页面中，选择Edit select… · 2026/9/21 9:27:31

Claude Code 实战：项目里真正好用的做法与 TaoToken 配置骨架

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 19:48:40

耗资 2 亿 Tokens！我把整个阿里云“折叠”进了 AI Agent，支持一句话建站 + 通义千问大模型全家桶（TaoToken 统一 Key 接入版）

AI 营销技能库：为 AI 编程代理赋能营销全流程的 TaoToken 配置实战

AI Agent 成为新杀伤链：用 TaoToken 统一 Key 通道守住配置文件与工具链

做酒业网站的要求全解：避坑完整流程

做酒业网站的要求全解：避坑完整流程找建站公司怕被坑高价？别慌，今天把做酒业网站的要求和完整流程掰开揉碎了讲清楚。在河南做酒水生意，很多老板觉得官网就是个面子工程，随便找个便宜工作室弄弄就行。结果呢？页面卡顿、手机看不清、搜索排名掉… · 2026/9/27 19:48:34

GitHub Copilot for JetBrains 的 Agent Runtime 治理：用 TaoToken 统一 BYOK、Claude Provider 与 Sandbox 边界(2026

MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现

简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南：5大注意事项救急

汕头网站建设制作厂家避坑指南：5大注意事项救急改个需求建站公司拖一周，这种憋屈事我见得太多了。很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。今天不聊虚的，直接拆解找汕头网站建设制作厂家时的5个核心注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习

简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01

MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现

汕头网站建设制作厂家避坑指南：5大注意事项救急

多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习

Vue3 获取DOM元素总结

相关推荐

了解更多？预约专属演示