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.代码示例&l

々橙若℃ №

3297人浏览 · 2020-10-20 22:26:59

々橙若℃ № · 2020-10-20 22:26:59 发布

文章目录

前言
一.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元素

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^