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
上次更新: 2022/05/30 12:17:36
最近更新
01
关于我
07-14
02
科学上网
11-15
03
OSS+CDN
09-23
更多文章>
极昼青春
买辣椒也用券