Vue中的ref和$refs

时间:2022-03-23作者:klpeng分类:IT综合浏览:715评论:0

 Vue可以在标签中设置ref = "ref名"属性,在Vue中通过this.$refs.ref名来获取该标签的dom。类似于原生dom中的id = "id名 "document.getElementsById("id名");
 例如:

html中:
<div ref = "test">
Vue中:
this.$refs.test 

 代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div ref="t1" class="class1">我是一只猫
				<div>T1</div>
			</div>
			<input type="button" value="点击" @click="show">
		</div>
		<script src="../js/vue.js"> </script>
		<script>
			var app = new Vue({
				el:"#app",
				methods:{
					show:function(){
						console.log(this.$refs);
						console.log( this.$refs.t1 ); //获取t1的dom信息
						console.log( this.$refs.t1.innerText  ); //获取t1的文本
						console.log( this.$refs.t1.className); //获取t1的class
						
					}
				}
			} )
		</script>
	</body>
</html>


 运行效果:
Vue中的ref和$refs

打赏
文章版权声明:除非注明,否则均为彭超的博客原创文章,转载或复制请以超链接形式并注明出处。
相关推荐

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

猜你喜欢