【vue】vue 如何获取并操作DOM元素

最新推荐文章于 2025-10-14 16:03:17 发布

原创最新推荐文章于 2025-10-14 16:03:17 发布 · 1.6w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

Vue基础专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue中通过两种方式操作DOM的方法：一是直接给元素添加ID并通过document.getElementById获取；二是使用ref属性并通过this.$refs访问。这两种方法分别适用于不同场景，并强调在Vue中应尽量避免直接操作DOM。

方法一： 直接给的元素加id,使用document.getElementById(“id”)获取，然后操作 dom 元素

mounted(){
	this.element = document.querySelector('#element_1');
	this.element.style.color = "red";
}

为什么是在mouted钩子使用？
因为只有在执行mounted的时候，vue才已经渲染了dom节点，这个时候是可以获取dom节点的

方法二： 使用ref,给元素添加ref=“name” ，使用 this.$refs.name 获取到该元素，再对元素进行操作

// 定义ref
<div ref="div_1">获取元素</div>
// 获取并操作
this.$refs.div_1.style.backgroundColor="red"

建议：vue中尽量不去操作 dom 元素，选用 ref 操作属性获取

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

@皮皮是只猫

关注关注

6
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue实战指南获取DOM、操作组件

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

09-21

2585

当需要从子组件向父组件传递数据时，可以使用$emit来触发自定义事件。

Vue 点击获得父元素，子元素，兄弟元素（DOM操作）|| 添加元素元素属性（jQuery）

wj的博客

02-07

2906

<ul @click ="clickfun($event)"> <li></li> </ul> 获取元素 methods: { clickfun(e) { e.target //是你当前点击的元素 e.currentTarget //是你绑定事件的元素 //获得点击元素的前一个元素 e.currentTarget.previousElementSibling

1 条评论您还未登录，请先登录后发表或查看评论

在vue中获取dom元素内容的方法

08-30

本篇文章主要介绍了在vue中获取dom元素内容的方法，可以通过给标签加ref属性，这里整理了详细的代码,有兴趣的可以了解一下

DOM元素查询方法总结

m0_45093055的博客

10-14

265

本文总结了获取和操作DOM元素的多种方法。介绍了通过ID、选择器获取根元素，以及Vue框架中的$el和ref引用方式。对比了querySelector、querySelectorAll、getElementById等方法的区别，包括返回类型、作用域限制和动态更新特性。推荐了不同场景下的最佳实践，如使用querySelector获取单个元素，querySelectorAll批量操作元素。特别强调了作用域隔离的重要性，避免全局查询污染。最后通过el-upload组件示例，展示了如何在实际业务中结合表单验证触发文

vue获取dom元素

qq_24612793的博客

07-30

4470

<div class="firstOpeart" style="display: block;" @click="addStyle" ref="openText"> <span class="opeart">展开</span> </div> methods:{ addS

Vue中如何获取dom元素？vue方法

cccbbbmmm的博客

10-13

3258

这些方法可以用于获取 DOM 元素，但在开发 Vue 应用时，尽量避免直接操作 DOM，而是通过数据绑定和响应式的方式来管理数据和更新视图。使用 ref 属性：在模板中给需要获取的 DOM 元素添加 ref 属性，然后可以通过 this.$refs 对象访问该元素。2.使用 ��属性：在��实例中，通过‘el属性：在Vue实例中，通过‘el` 属性可以访问当前组件所对应的 DOM 元素。3.使用事件修饰符：在 Vue 的事件处理中，可以使用事件修饰符。获取触发事件的原生 DOM 元素。

vue获取DOM元素并设置属性的两种实现方法

08-29

在使用Vue框架开发项目时，我们常常需要获取DOM元素并对其进行操作，比如设置属性或样式。Vue提供了多种方式来实现这一需求，本文主要介绍两种方法：一种是通过给元素添加id属性，另一种是利用Vue的ref属性。首先...

vue操作dom元素的3种方法示例

10-14

虽然不是直接操作DOM，但Vue的`v-model`和`v-bind`指令可以间接地帮助我们管理DOM元素的属性。`v-model`用于双向绑定输入元素的值，而`v-bind`可以用来绑定任何属性，包括样式。例如： ```html ...

详解在Vue中通过自定义指令获取dom元素

12-08

Vue.js 是一款流行的前端...通过结合自定义指令和Vue实例的`data`，我们可以安全地存储和访问DOM元素，从而在需要的时候进行进一步操作。这种方式不仅保留了Vue的响应式特性，同时也满足了对DOM的直接操作需求。

精选资源

在Vue中使用ref获取dom元素节点及组件内的数据和方法

01-20

通过`this.$refs.mytitle`和`this.$refs.mycontent`，我们分别获取到了对应的DOM元素，并可以进行进一步的操作，如读取其内容、修改样式、绑定事件等。 ### 二、获取组件内的数据和方法对于Vue组件，`ref`的使用...

Vue如何获取Dom

GodLoveMe的博客

04-21

1063

在Vue中获取DOM元素可以通过几种方法：1、使用模板引用（ref），2、使用事件绑定，3、使用生命周期钩子。这些方法各有优缺点，适用于不同的场景。本文将详细介绍这些方法的使用方式及其适用场景，帮助你更好地理解和应用它们。

vue如何获取DOM元素

zybijiso666的博客

08-02

2362

最后，我们使用p.text()来获取<p>元素中的文本内容，并将其打印到控制台中。Vue中的$refs是一个特殊对象，它为组件中的所有DOM元素提供了一个引用。在Vue组件中，可以通过ref属性为元素命名，然后使用$refs对象访问该元素。综上所述，Vue提供了多种方法来获取DOM元素，从简单的$refs到强大的jQuery选择器。在处理DOM事件时，Vue组件提供了一个特殊的事件参数$event，它包含关于事件的所有信息，包括当前事件的目标元素（target）。二、通过事件参数 $event 获取元素。

Vue中获取Dom元素--ref和$refs

Ahkydijd的博客

12-27

1940

作用:利用ref和$refs可以获取到组件实例或者dom元素特点:查找范围 → 当前组件内更为精确稳定。

vue如何获取并操作DOM元素

weixin_33727510的博客

05-15

8828

原文地址方法一：直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式方法二：使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素注意：在获取相应元素之前，必须在mount钩子进行挂载，否则获取到的值为空，　　如果是给...

vue获取dom元素的方法_DOM元素节点操作方法

weixin_39851914的博客

12-03

2006

1.1creatElement( )方法与appendChild( )方法creatElement( )方法可以创建元素节点，其参数是标签名。appendChild( )方法可以向DOM元素尾部添加新元素(内容).如需向 HTML DOM 添加新元素，您必须首先用createElement创建该元素(元素节点)。appendChild使用格式是node1.appendChild(node...

八.vue获取dom元素

iloadj的博客

11-12

1129

vue获取dom元素方法一:直接给相应的元素加id,然后再document.getElementById(“id”);获取，然后设置相应属性或样式方法二：使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素例 <div ref="tet" id="tet">我是tet</div> const vm = new Vue({ el:"#app", mounted(){ document.querySelector

vue 操作dom元素

周家大小姐

01-28

993

html: <div class="foods-wrapper" ref="foodScroll"> <ul>  <li class="container-list food-list-hook"> <div v-for="(

vue 获取元素

Im_a_Bad_Boy的博客

03-17

542

e.target 是你当前点击的元素 e.currentTarget 是你绑定事件的元素 e.currentTarget.previousElementSibling.innerHTML 获得点击元素的前一个元素 e.currentTarget.firstElementChild 获得点击元素的第一个子元素 e.currentTarget.nextElementSibling 　　获得点击元素的下一个元素 e.currentTarget.getElementById(“string”) 　　获得点击元素中i

vue如何获取，操作dom

最新发布

10-22

在Vue中获取和操作DOM有多种方法： 1. **使用DOM API直接找元素**：在Vue的`mounted`钩子函数中，可以使用`this.$el.querySelector`方法来获取DOM元素。例如： ```javascript <script> export default { mounted () { let elm = this.$el.querySelector('#id'); } } </script> ``` 该方法适用于在Vue组件内部通过选择器获取特定的DOM元素 [^1]。 2. **利用`ref`属性**：在Vue中可以为DOM元素添加`ref`属性，然后通过`this.$refs`来访问。示例代码如下： ```html <template> <div> <button ref="btn">按钮</button> <div ref="box"> <h1> ref</h1> <p> 测试</p> </div> <hr> <div ref="myDiv"> <p v-for="item in 10">{{item}}</p> </div> </div> </template> <script> export default { mounted() { const btn = this.$refs.btn; // 可以对btn进行操作 } } </script> ``` 这种方法简单直接，推荐在Vue中优先使用 [^4]。 3. **将元素改成组件并使用`this.$el`**：在vue.js里，可以把某个DOM元素改成一个组件，之后通过`this.$el`获取该元素。不过在小型项目或者未使用webpack等构建工具的项目中，创建组件可能不太划算 [^3]。 4. **自定义指令（directive）**：Vue提供了自定义指令的方式来操作DOM元素，适用于一些需要对DOM进行特殊操作的场景 [^3]。 5. **在Vue 3中获取和操作DOM**： - **获取DOM节点的`width`**：使用`vNode.style.width`只能获取JS给定的`width`，无法获取CSS给定的`width`，这种方式可能获取到空值 [^5]。 - **给DOM节点添加`class`**：使用`vNode.classList.add('newClass')`为某个DOM节点添加类名 [^5]。 - **修改样式**：获取到DOM元素节点后，设置`style`属性。例如： ```javascript import { ref, nextTick } from 'vue'; import headerOrangeMask from '@/assets/img/header-blue-mask.png'; export default { setup() { const myMask = ref(null); nextTick(() => { myMask.value.style.backgroundImage = `url(${headerOrangeMask})`; }); return { myMask }; } } ``` - **父组件调用子组件的函数方法**： - 子组件暴露要被父组件调用的方法，使用`defineExpose`。例如： ```javascript import { defineExpose } from 'vue'; export default { setup() { function noticeSwiper() { console.log("子组件中的方法执行了"); } defineExpose({ noticeSwiper }); return {}; } } ``` - 父组件中取得子组件的`dom`并调用方法： ```html <template> <Notice ref="noticeNode"></Notice> </template> <script> import { ref } from 'vue'; import Notice from './Notice.vue'; export default { components: { Notice }, setup() { const noticeNode = ref(null); function getNotice() { store.dispatch('notice/getNoticeList').then(() => { noticeNode.value.noticeSwiper(); }); } return { noticeNode, getNotice }; } } </script> ``` [^5]