vue获取dom元素
方法一:直接给相应的元素加id,然后再document.getElementById(“id”);获取,然后设置相应属性或样式
方法二:使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素
例
<div ref="tet" id="tet">我是tet</div>
const vm = new Vue({
el:"#app",
mounted(){
document.querySelector("#tet").innerHTML = "哈哈哈";
console.log(this.$refs.tet);
this.$refs.tet.style.backgroundColor="red"
}
})
⭐注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空,
如果是给子组件加id并修改自定义属性,则直接会加载给子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值。
如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错: