Vue获取DOM元素并修改属性的方法

更新时间：2022年10月10日 10:23:57 作者：阳光下的冷静

这篇文章主要介绍了Vue获取DOM元素并修改属性或者样式，文中通过两种方法给大家介绍了vue 如何获取并操作DOM元素,需要的朋友可以参考下

Vue获取DOM元素

Vue获取DOM元素有两种方法

直接给相应的元素加id,然后再使用document.getElementById("id");获取
使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素

Vue获取到元素并修改属性或者样式

使用上述的第二种方法，获取到元素，然后使用this.$refs.元素元素的ref对应的name.style.属性名(样式或者其他的属性名) = “你要设置的值”或者元素的ref对应的name.属性名(样式或者其他的属性名) = “你要设置的值”``，如this.$refs.more.style.bottom = “20px”;就是将ref的name为more的元素的bottom属性改为20px`

注意：

在获取相应元素之前，必须在mounted生命周期进行挂载，否则获取到的值为空；
如果是给子组件加id并修改自定义属性，则直接会加载该子组件对应的外层div上，并不会改变该子组件原本的自定义属性的值；
如果给子组件加ref，然后获取到该DOM元素之后改变相应的自定义属性的值，vue会报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent component

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 操作属性获取

到此这篇关于Vue获取DOM元素并修改属性的方法的文章就介绍到这了,更多相关Vue获取DOM元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue element-ui el-tooltip组件失效问题及解决
这篇文章主要介绍了vue element-ui el-tooltip组件失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue相同路由跳转强制刷新该路由组件操作
这篇文章主要介绍了vue相同路由跳转强制刷新该路由组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vscode下vue项目中eslint的使用方法
这篇文章主要给大家介绍了关于vscode下vue项目中eslint的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
vue3+ElementPlus封装函数式弹窗组件详解
这篇文章主要为大家详细介绍了如何利用vue3和ElementPlus封装函数式弹窗组件，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2023-08-08
浅谈vue-router路由切换组件重用挖下的坑
今天小编就为大家分享一篇浅谈vue-router路由切换组件重用挖下的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue中this.$http.post()跨域和请求参数丢失的解决
这篇文章主要介绍了vue中this.$http.post()跨域和请求参数丢失的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue 中使用 bimface详情
这篇文章主要介绍了vue 中使用 bimface详情,分别有安装 vue 脚手架、创建项目、引入 bimface 响应的文件、修改 App.vue 文件，实现页面渲染等步骤，需要的小伙伴可以参考一下
2021-12-12
在vue中实现表单验证码与滑动验证功能的代码详解
在Web应用程序中，表单验证码和滑动验证是常见的安全机制，用于防止恶意攻击和机器人攻击，本文将介绍如何使用Vue和vue-verify-code库来实现表单验证码和滑动验证功能,需要的朋友可以参考下
2023-06-06
Vue中Vue.extend()的使用及解析
这篇文章主要介绍了Vue中Vue.extend()的使用及解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue组件实现列表自动无限循环的方法
最近刚好有个功能需要实现列表的无限循环滚动,这篇文章主要给大家介绍了关于vue组件实现列表自动无限循环的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-11-11