ref获取DOM
# ref获取DOM
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。
<div id="app" v-cloak>
<div class="box1" ref="box1">我是第一个盒子</div>
<div class="box2" ref="box2">我是第二个盒子</div>
<div class="box3" ref="box3">我是第三个盒子</div>
</div>
mounted(){
//获取box1的内容,支持点的方式获取
console.log(this.$refs.box1.innerHTML);
//获取box1父元素id="app"的内容,支持点的方式获取
console.log(this.$refs.box1.parentNode.innerHTML);
//获取box2下一个元素box3的内容,支持中括号的方式获取
console.log(this.$refs['box2'].nextElementSibling);
//获取box3上一个元素box2的内容,支持中括号的方式获取
console.log(this.$refs['box3'].previousElementSibling);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
上次更新: 2022/05/30 12:17:36