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

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

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

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

利用ref属性获取element-ui组件的方法（vue2）
不被定义的程序媛写的博客儿
03-27 1271
对于ref的用法一直不太理解，做项目遇见一个小例子记录一下其中之一的用法，自留复盘
Vue2：通过ref获取DOM元素
Brave_heart4pzj的博客
01-08 2747
Vue
vue3.5中useTemplateRef获取DOM元素
最新发布
whhhhhhhhhw的博客
06-27 391
vue3.5推出了一种新的获取DOM元素的API（useTemplateRef），它与vue3.5之前获取DOM元素有什么不同呢？今天我们来学习一下。 在vue3.5之前，我们要给需要获取DOM元素上面添加一个ref，然后给这个ref一个名字，在逻辑代码中创建一个变量，变量名需要和DOM元素上ref的名称相同。代码如下： 这样我们就成功的获取到了这个DOM元素，这样的缺点显而易见，它的变量名称不能随意更改，灵活性不高。 因此在vue3.5推出了useTemp
Vue2.（获取 DOM 元素或组件的引用：$ref，mixin.js混合配置，自定义插件）
切图仔
04-23 5819
Vue2.（获取 DOM 元素或组件的引用：$ref，mixin.js混合配置，自定义插件）
vue-ref获取dom元素
zxt220323的博客
11-04 212
一丶介绍 <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 556
前言 附上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
在vue中获取dom元素内容的方法
08-30
使用 ref 属性获取 DOM 元素内容是 Vue 中最常用的方法，这种方法可以让开发者轻松地获取到 DOM 元素的引用，从而进行各种操作。下面是一个简单的示例： <div id="box" ref="mybox"> DEMO export ...
【vue2第十二章】ref和$refs获取dom元素 和 vue异步更新与$nextTick使用
weixin_72979483的博客
09-04 6037
Vue的异步更新是指在Vue的响应式系统中，更新组件的方式是异步的。这意味着当数据发生变化时，Vue并不立即更新组件的DOM，而是等到同一事件循环中的所有数据变化完成后，再统一进行一次更新操作。
vue2中ref的使用
weixin_46541579的博客
03-03 663
在vue中，ref是一个比较实用的特性，它允许开发者直接操作dom元素或者子组件的方法。
v-for获取ref(vue2中获取动态ref)
ababbaqq的博客
11-07 1951
【代码】v-for获取ref(vue2中获取动态ref)
vue中的ref
m0_67388537的博客
07-24 3389
2.遍历的元素,先定义一个空数组,定一个函数获取元素,返回给模板使用,通过ref绑定这个函数。1.单个元素:先声明ref响应式数据,返回给魔板使用,通过ref绑定数据。
Vue ref获取元素和组件实例
ScottePerk的博客
11-16 7325
在写Vue的过程中，我们从来不会写这种代码，但是下面的代码在vue里面是可以运行的。我们很少去获取元素的，因为根本不需要，我们只需要修改数据让vue自动帮我们更新UI就行。el会直接获取顶层元素，如果有多个元素，那么会获取第一个node节点，一般是#text,也就是换行。这是获取到的代理对象，里面有showBanner方法，可以证明，这个就是Banner的代理对象。，根本就不需要先找到具体的元素。获取组件实例后，我们是可以调用组件的方法的，这个还是有点用的。最后，获取到了banner组件的顶层元素。
vue2.0 中 ref理解
m0_65730686的博客
08-11 476
vue2.0 中 ref理解
vue中获取dom元素
weixin_47745553的博客
02-03 1630
因为：我们会在标签上操作很多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 1734
概念：.vue 中的template里面写的标签，都是模版，要被vue处理成虚拟dom对象，才会渲染现实到真实Dom页面上。介绍：内存生成一样的虚拟Dom结构 本质是个js 对象因为真实的dom属性好几百个，没办法快速的知道哪一个属性改变了。比如template 里面的标签结构对应的虚拟dom 结构以后vue数据更新，生成新的虚拟dom结构 和 旧的 dom结构 对比 利用diff算法，找不同，只更新变化的部分（重绘/回流）到页面。也叫打补丁。
VUE2语法-$refs和ref属性的使用
热门推荐
雾林小妖的博客
11-22 1万+
VUE中使用ref修饰标签，通过$refs获取标签的相关信息。
vue3使用ref获取dom元素style
02-24
### Vue 3 中使用 `ref` 获取 DOM 元素并操作其样式 在 Vue 3 中，可以利用 Composition API 提供的 `ref` 函数来创建响应式的引用对象，并通过这些引用访问真实的 DOM 节点及其属性。当目标是在挂载阶段之后修改特定元素的内联样式时，可以在生命周期钩子函数如 `onMounted()` 内部执行相应逻辑。 下面是一个具体的例子展示如何设置和改变某个 div 的背景颜色： ```html <template> <div ref="styledDiv">这个方框的颜色会变化</div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const styledDiv = ref(null); onMounted(() => { // 修改DOM元素的style属性 styledDiv.value.style.backgroundColor = "lightblue"; console.log(styledDiv.value.style); }); return { styledDiv, }; }, }; </script> <style scoped> /* 初始样式 */ div { width: 200px; height: 200px; } </style> ``` 此代码片段展示了如何定义一个名为 `styledDiv` 的引用变量指向模板中的 `<div>` 元素，在组件完成渲染后 (`onMounted`) 更改该元素的背景色为浅蓝色[^1]。 对于更复杂的场景下可能需要等待下一个 DOM 更新周期再读取或更新样式的情况，则可借助于 `nextTick` 方法实现延迟处理: ```javascript import { ref, nextTick } from 'vue'; // ... const changeStyleLater = async () => { await nextTick(); styledDiv.value.style.borderRadius = "50%"; }; changeStyleLater(); ``` 上述方法确保了样式的更改发生在所有的状态变更被应用到 DOM 后立即发生[^2]。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

超级码吏

谢谢看官

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

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

打赏作者

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

抵扣说明：

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

余额充值