vue模板引用ref（就是获取dom操作dom元素）

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute：

<input ref="input">

ref 是一个特殊的 attribute，和 v-for 章节中提到的 key 类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个 input 元素上，或在一个元素上初始化一个第三方库。

实例：
 

<template>
	<h3>模板引用</h3>
	<p ref="cp"></p>
	<input  ref="xinput" />
	<input type="text" v-model="con">
	<button @click="abc">获取dom</button>
</template>

<script>
	export default{
		data(){
			return{
				con:''
			}
		},
		methods:{
			abc(){
				//获取cp元素
				//console.log(this.$refs.cp);
				
				//设置cp元素的文本
				this.$refs.cp.innerHTML = '你好吗';
				
				//获取input的值
				console.log(this.$refs.xinput.value);
				
				console.log(this.con);
			}
		}
	}
</script>
	
<style>
</style>

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/157/1073.html

很赞哦！ (0)