vue2 使用ref获取并操作DOM元素

已于 2023-08-09 09:57:14 修改
阅读量6.4k 收藏 1
点赞数
分类专栏： 前端JS框架：vue2 文章标签： 获取元素 vue-cli ref dom
于 2019-07-05 21:22:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42618566/article/details/94765315
版权
本文介绍了在 Vue2 中如何利用 ref 属性来获取并操作 DOM 元素。通过在元素上设置 ref，并在 mounted 生命周期钩子内进行操作，确保在页面渲染完成后修改元素样式，例如将 h3 标签颜色更改为红色。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

获取元素的方法有很多，但在vue中最好用vue提供的方法：ref。
如下图，给想要操作的标签一个属性ref，然后给个值（就是你起的名字，下面要通过这个名字获取，跟原生的方法中class、id一样)
在这里插入图片描述
起好名字后一定要去mounted钩子里操作，因为页面执行到这个钩子的时候已经渲染出DOM了。
如下图：
在这里插入图片描述
那么下载这个h3标签已经改成红色了
在这里插入图片描述

Vue2：通过ref获取DOM元素
Brave_heart4pzj的博客
01-08 2311
Vue
利用ref属性获取element-ui组件的方法（vue2）
不被定义的程序媛写的博客儿
03-27 1197
对于ref的用法一直不太理解，做项目遇见一个小例子记录一下其中之一的用法，自留复盘
VUE通过ref来获取dom元素及其他属性
最新发布
m0_67469586的博客
04-07 210
提交信息
Vue2.（获取 DOM 元素或组件的引用：$ref，mixin.js混合配置，自定义插件）
切图仔
04-23 5731
Vue2.（获取 DOM 元素或组件的引用：$ref，mixin.js混合配置，自定义插件）
vue-ref获取dom元素
zxt220323的博客
11-04 203
一丶介绍 <div id="demo1" ref="demo2">hello word</div> this.$refs.demo2=document.getElementById('demo1'); this.$refs.demo2=document.querySelector('#demo1'); 二丶扩展 this.$refs放在created里边会得到undefined； this.$nextTick(()=>{ this.$refs...
vue2和vue3使用ref获取元素
热门推荐
qq_44473483的博客
01-10 1万+
vue2和vue3通过red获取元素
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
本文将详细讲解如何在Vue中使用`ref`来获取DOM元素节点以及组件内的数据和方法。 ### 一、获取DOM元素节点 在HTML模板中，给需要引用的DOM元素添加`ref`属性，如： ```html <div ref="mytitle">This is title ...
vue获取DOM元素并设置属性的两种实现方法
08-29
如果是为了操作DOM元素本身的属性或样式，通常使用ref更为合适，因为我们可以在Vue的生命周期钩子内安全地获取DOM元素并进行操作。如果仅仅是要获取元素以进行简单的操作，使用document.getElementById()也是可以的...
vue 3.0 使用ref获取dom元素
shuux666的博客
03-01 545
前言 附上vue3.0文档：Vue3中文文档 - vuejs Vue 2.x获取DOM <div ref="myRef"></div> this.$refs.myRef Vue 3.0获取单个DOM <template> <div ref="myRef">获取单个DOM元素</div> </template> <script> import { ref, onMounted } from 'vue'; expor
【vue2第十二章】ref和$refs获取dom元素 和 vue异步更新与$nextTick使用
weixin_72979483的博客
09-04 5851
Vue的异步更新是指在Vue的响应式系统中，更新组件的方式是异步的。这意味着当数据发生变化时，Vue并不立即更新组件的DOM，而是等到同一事件循环中的所有数据变化完成后，再统一进行一次更新操作。
vue2中ref的使用
weixin_46541579的博客
03-03 598
在vue中，ref是一个比较实用的特性，它允许开发者直接操作dom元素或者子组件的方法。
v-for获取ref(vue2中获取动态ref)
ababbaqq的博客
11-07 1926
【代码】v-for获取ref(vue2中获取动态ref)
vue中的ref
m0_67388537的博客
07-24 3335
2.遍历的元素,先定义一个空数组,定一个函数获取元素,返回给模板使用,通过ref绑定这个函数。1.单个元素:先声明ref响应式数据,返回给魔板使用,通过ref绑定数据。
Vue ref获取元素和组件实例
ScottePerk的博客
11-16 7247
在写Vue的过程中，我们从来不会写这种代码，但是下面的代码在vue里面是可以运行的。我们很少去获取元素的，因为根本不需要，我们只需要修改数据让vue自动帮我们更新UI就行。el会直接获取顶层元素，如果有多个元素，那么会获取第一个node节点，一般是#text,也就是换行。这是获取到的代理对象，里面有showBanner方法，可以证明，这个就是Banner的代理对象。，根本就不需要先找到具体的元素。获取组件实例后，我们是可以调用组件的方法的，这个还是有点用的。最后，获取到了banner组件的顶层元素。
vue2.0 中 ref理解
m0_65730686的博客
08-11 467
vue2.0 中 ref理解
vue中获取dom元素
weixin_47745553的博客
02-03 1597
因为：我们会在标签上操作很多vue的指令，vue把所有的指令都执行完，拿到最新的dom节点（提高渲染效率）当我们让key的值变为true，通过ref调用输入框自动聚焦的原生focus方法后。操作dom，会有一个回调函数，回调函数会等待dom上vue指令全部执行完后才调用。如果操作dom节点，最好在dom节点的外层加一个this.$nextTick。把组件当成一个普通的标签，上面写上ref="起一个名字"直接使用会报错，因为父子组件的作用域是不同的独立的。通过this.$refs.起的名字获取。
vue2 v-for ,虚拟dom ，diff算法，动态class，动态style
Cxil的博客
11-24 1718
概念：.vue 中的template里面写的标签，都是模版，要被vue处理成虚拟dom对象，才会渲染现实到真实Dom页面上。介绍：内存生成一样的虚拟Dom结构 本质是个js 对象因为真实的dom属性好几百个，没办法快速的知道哪一个属性改变了。比如template 里面的标签结构对应的虚拟dom 结构以后vue数据更新，生成新的虚拟dom结构 和 旧的 dom结构 对比 利用diff算法，找不同，只更新变化的部分（重绘/回流）到页面。也叫打补丁。
VUE2语法-$refs和ref属性的使用
雾林小妖的博客
11-22 1万+
VUE中使用ref修饰标签，通过$refs获取标签的相关信息。
v-for获取ref(vue2/3中获取动态ref)
LoveHaixin的博客
10-27 1089
【代码】v-for获取ref(vue2/3中获取动态ref)
vue3 使用ref获取dom元素的高度
03-29
### Vue 3 中通过 `ref` 获取 DOM 元素高度 在 Vue 3 中，可以通过组合式 API 的方式来获取 DOM 元素的高度。具体实现方法如下： #### 使用 `onMounted` 和 `ref` 可以利用 `ref` 来绑定目标 DOM 元素，并在其挂载完成后访问该元素的相关属性（如 `offsetHeight` 或 `clientHeight`）。以下是完整的代码示例[^1]。 ```javascript <template> <div ref="myRef">这是一个测试元素</div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const myRef = ref(null); onMounted(() => { if (myRef.value) { console.log('DOM 高度:', myRef.value.offsetHeight); // 访问 DOM 元素的高度 } }); return { myRef, }; }, }; </script> ``` 上述代码展示了如何通过 `onMounted` 生命周期钩子，在组件挂载完成之后读取指定 DOM 元素的高度。这里使用的是 `offsetHeight` 属性，它返回元素的内容区域加上边框和内边距的高度。 --- #### 结合 `nextTick` 动态更新后的高度 如果需要等待某些异步操作或者动态渲染结束后再获取 DOM 元素的高度，则可以借助 `nextTick` 方法。下面是一个例子[^2]。 ```javascript <template> <h2 ref="domH2">{{ title }}</h2> </template> <script> import { ref, nextTick } from 'vue'; export default { setup() { const domH2 = ref(null); const title = ref('初始标题'); setTimeout(() => { title.value = '新的标题'; nextTick(() => { if (domH2.value) { console.log('更新后 H2 高度:', domH2.value.clientHeight); // 客户端可见部分高度 } }); }, 1000); return { domH2, title, }; }, }; </script> ``` 在这个案例中，当数据发生变化并触发视图重新渲染时，`nextTick` 确保了我们可以在新内容完全呈现后再去测量其尺寸。 --- ### 总结 无论是静态还是动态场景下，都可以灵活运用 Vue 提供的工具函数以及响应式的特性来捕获所需的信息。对于简单的初始化需求可以直接采用 `onMounted`；而对于涉及复杂状态变化的情况则推荐配合 `nextTick` 实现更精确的操作逻辑。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

钱厚端

谢谢看官

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值