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