13_vue属性ref操作DOM元素_vue ref 赋值给dom

作者：我家自动化 | 2024-02-23 05:04:14

踩

vue ref 赋值给dom

1、ref的作用

1）ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
2）如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。
3）当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

2、实例代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01_使用ref操作DOM元素</title>
</head>
<body>
	<div class="app">
		<p ref="para" @click="chgStyle">hahahahha</p>
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
	// ref如何使用
	// 第一：在需要获取的DOM元素上绑定 ref='变量名(如：name1)';
	// 第一：创建的Vue组件中使用this.$refs.变量名进行使用(如：this.$refs.name1.);
	var app = new Vue({
		el: '.app',
		data: {},
		methods: {
			chgStyle () {
				this.$refs.para.style.color = 'red';
				this.$refs.para.style.fontSize = '40px';
			},
		}
	})
</script>
</html>
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/133875?site