vue基础之ref操作dom元素

最新推荐文章于 2024-05-21 15:01:45 发布

一杯雪花勇闯天涯

最新推荐文章于 2024-05-21 15:01:45 发布

阅读量3.2k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/u014265398/article/details/109190709

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

文章目录

前言
一.ref属性的使用
总结

前言

学习vue是如何操作dom元素

提示：以下是本篇文章正文内容，下面案例可供参考

一.ref属性的使用

1.要给操作的元素设置ref属性

2.在创建的vue实例属性中的mounted(){this.$refs.ref属性值}

3.代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue基础refdom操作</title>
	</head>
	<body>
		<div id="app">
			<input type="text" ref="text" v-model="text"/>
		</div>
	</body>
</html>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		methods:{
			
		},
		data:{
			text:''
		},
		mounted(){ //相当于window.onload方法，页面加载完毕后会自动调用该方法
		  this.$refs.text.focus();	
		}
	});
</script>

在这里插入图片描述
【自动获取焦点】
代码示例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue基础refdom操作</title>
	</head>
	<body>
		<div id="app">
			<div ref="text">{{text}}</div>
			<button @click="add">添加</button>
		</div>
	</body>
</html>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		methods:{
			add:function() {
				this.$refs.text.innerHTML+= "世界那么大，我向想出去看一看";
			}
		},
		data:{
			text:''
		}
		
	});
</script>

在这里插入图片描述

总结

学习vue是如何操作dom元素

一杯雪花勇闯天涯

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue基础之ref操作dom元素

文章目录前言一.ref属性的使用1.要给操作的元素设置ref属性2.在创建的vue实例属性中的mounted(){this.$refs.ref属性值}3.代码示例总结前言学习vue是如何操作dom元素提示：以下是本篇文章正文内容，下面案例可供参考一.ref属性的使用1.要给操作的元素设置ref属性2.在创建的vue实例属性中的mounted(){this.$refs.ref属性值}3.代码示例<!DOCTYPE html><html> <head>
复制链接

扫一扫