Vue获取DOM元素并修改属性的方法
作者:阳光下的冷静
这篇文章主要介绍了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元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!