关于Vue2中获取DOM元素

关于Vue2中获取DOM元素

在vue2.0中,已经对vue1.x中的v-ref、v-el 弃用 统一使用ref属性为元素或组件添加标记,然后通过this.$refs获取,下面是获取dom元素的实例.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于Vue2中$refs获取DOM元素</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue'
},
methods: {
alert1: function() {
console.log(this.$refs.div2);
}
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg}}
<br>
<input type="button" value="Button" v-on:click="alert1()">
<div ref='div2'>
<h3>hello</h3>
</div>
</div>
</body>
</html>
坚持原创技术分享,您的支持将鼓励我继续创作!