Vue获取DOM元素并修改属性的方法(vue获取dom元素的方法)

编辑：rootadmin

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

推荐整理分享Vue获取DOM元素并修改属性的方法(vue获取dom元素的方法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue获取dom元素并追加html,vue获取dom元素并转成字符串,vue获取dom元素并追加元素,vue获取dom元素并追加html,vue获取dom元素并修改样式,vue获取dom元素并追加元素,vue获取dom元素并转成字符串,vue获取dom元素并添加元素,内容如对您有帮助，希望把文章链接给更多的朋友！

Vue获取DOM元素有两种方法

直接给相应的元素加id,然后再使用document.getElementById("id");获取使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素Vue获取到元素并修改属性或者样式 Vue获取DOM元素并修改属性的方法(vue获取dom元素的方法)

使用上述的第二种方法，获取到元素，然后使用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 componentvue 如何获取并操作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元素内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

本文链接地址:https://www.jiuchutong.com/zhishi/312953.html 转载请保留说明！

上一篇：python执行数据库的查询操作(python 操作数据库)

下一篇：Dedecms列表pagelist翻页按钮样式怎么解决(dedecms5.7)