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

已于 2023-08-09 09:57:14 修改
阅读量6.2k 收藏
点赞数
分类专栏： 前端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
版权

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

美酒没故事°
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
订阅专栏
vue获取dom元素注意事项
08-28
vue获取DOM元素注意事项 vue获取DOM元素注意事项是vue开发中的一個重要知识点。获取DOM元素的高或内容是非常常见的需求，但是很多开发者都...这些方法可以帮助我们正确地获取DOM元素，并解决了vue获取DOM元素的困难。
vue操作dom元素的3种方法示例
10-14
在Vue.js中，操作DOM（文档对象模型）并不是推荐的最佳实践，因为Vue的设计理念是基于数据驱动，提倡使用声明式渲染。然而，在某些特定场景下，我们确实需要直接操作DOM，比如实现某些复杂的交互效果。这里我们将...
v-for获取ref(vue2中获取动态ref)
ababbaqq的博客
11-07 1655
【代码】v-for获取ref(vue2中获取动态ref)
vue2 v-for ,虚拟dom ，diff算法，动态class，动态style
Cxil的博客
11-24 1628
概念：.vue 中的template里面写的标签，都是模版，要被vue处理成虚拟dom对象，才会渲染现实到真实Dom页面上。介绍：内存生成一样的虚拟Dom结构 本质是个js 对象因为真实的dom属性好几百个，没办法快速的知道哪一个属性改变了。比如template 里面的标签结构对应的虚拟dom 结构以后vue数据更新，生成新的虚拟dom结构 和 旧的 dom结构 对比 利用diff算法，找不同，只更新变化的部分（重绘/回流）到页面。也叫打补丁。
【Vue】利用ref 和 $refs获取 dom 元素 或 组件实例
最新发布
qq_39921135的博客
06-06 378
作用：利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例特点：查找范围 → 当前组件内(更精确稳定)注意：之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子，而ref 和 $refs 查找的范围是当前组件内。
v-for获取ref(vue2/3中获取动态ref)
LoveHaixin的博客
10-27 746
【代码】v-for获取ref(vue2/3中获取动态ref)
vue2踩坑之项目：获取和操作动态 DOM 节点
意初的博客
05-28 777
uniapp踩坑之项目：TypeError: Cannot read properties of null (reading ‘getAttribute‘)_意初的博客-CSDN博客。是因为数据没有取到就切换别的页面，造成dom渲染失效导致，需要利用v-if和页面生命周期进行判断。uniapp踩坑之项目：各端条件编译_意初的博客-CSDN博客。主要是获取动态的dom元素，利用:class属性类名加上index即可，然后js里queryselector获取并且加上index。
VUE循环动态添加ref属性,及动态判断获取哪个
xu_duo_i的博客
11-29 1621
特别注意:this.$refs[e.pym][0]这个双方括号取值语法 很关键,我就在这浪费2小时 特别注意:classList.toggle('dis') class的特别方法,也特别好用(没有添加这个属性, 有就 删除) 可以很好的利用这一特性控制同一按钮 点击添加属性再点击删除属性
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
本文将详细讲解如何在Vue中使用`ref`来获取DOM元素节点以及组件内的数据和方法。 ### 一、获取DOM元素节点 在HTML模板中，给需要引用的DOM元素添加`ref`属性，如： ```html <div ref="mytitle">This is title ...
在vue中获取dom元素内容的方法
08-30
使用 ref 属性获取 DOM 元素内容是 Vue 中最常用的方法，这种方法可以让开发者轻松地获取到 DOM 元素的引用，从而进行各种操作。下面是一个简单的示例： <div id="box" ref="mybox"> DEMO export ...
解决vue项目获取dom元素宽高总是不准确问题
11-20
dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0]....补充知识：vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度） 使用 vue 的时候，想要
Vue2 --动态绑定class、过滤器参数、$ref、自定义指令、计算属性与监听器
weixin_51972964的博客
12-15 1106
v-bind动态绑定class <div :class='['default-class',{'active-class':isActive}]'> </div> <div :class='{'active-class':isActive}' data(){ return{ isActive:true } } 过滤器-filter参数 过滤器默认有一个实参,即管道符前面的数值,如果需要传参,则设多个形参,实参从第二个形参开始 <div>{{ text
Vue2基础篇-22-ref属性
Alan0517
12-09 279
ref属性
详解ref----＞如何获取dom元素
qq_52563729的博客
06-10 1769
ref
vue 或者 uniapp ref的用法总结
wangongchao的博客
01-29 1万+
1.基本用法，本页面获取dom元素 <template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div> </template> <script> export default { methods: { getTest()
vue生命周期四个阶段（created和mount），ref在哪个生命周期中获取
qq_43631129的博客
12-04 1433
vue生命周期中都干什么 vue生命周期四个阶段（created和mount）， ref在哪个生命周期中获取
vue中的 ref 和 $refs还有$nextTick()
秋霜梦红尘的博客
04-20 950
vue中的 ref 和 refs还有nextTick() 平时获取dom的方法： $("#id").text('xxx') // 使用Jquery document.getElementById("id") // 使用原生Dom vue获取dom的方法： 官网解释： 下面用两个例子来深入理解ref和refs 一、ref作用于组件 <div id="app"> <n...
Vue2.（获取 DOM 元素或组件的引用：$ref，mixin.js混合配置，自定义插件）
切图仔
04-23 5051
Vue2.（获取 DOM 元素或组件的引用：$ref，mixin.js混合配置，自定义插件）
Vue单文件组件中多个同名的ref属性，this.$refs的取值及其使用注意事项
热门推荐
fz_leaves的博客
01-04 3万+
Vue官方文档： ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。 1 当同一组件内部，有多个同名ref引用时 this.$refs[ref名称]指向文档流中靠下的组件或DOM节点，若是ref相同的组件或DOM节点间是父子关系，则指向父级组件或DOM节点。 1.1 this.$refs[ref名称]指向文档流中靠下的组件或DOM节点： <template&gt
vue3使用ref获取dom元素
06-10
2. 在Vue组件中，使用`ref`来获取引用的DOM元素，如下： ```js import { ref, onMounted } from 'vue'; export default { setup() { const myDiv = ref(null); onMounted(() => { console.log(myDiv.value);...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

美酒没故事°

谢谢看官

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

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

打赏作者

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

抵扣说明：

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

余额充值