Vue获取DOM元素并修改属性

Vue获取DOM元素

Vue获取DOM元素有两种方法

1. 直接给相应的元素加id,然后再使用document.getElementById("id");获取
2. 使用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`

注意：

1. 在获取相应元素之前，必须在mounted生命周期进行挂载，否则获取到的值为空；
2. 如果是给子组件加id并修改自定义属性，则直接会加载该子组件对应的外层div上，并不会改变该子组件原本的自定义属性的值；
3. 如果给子组件加ref，然后获取到该DOM元素之后改变相应的自定义属性的值，vue会报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"