首页> 基础笔记 >Vue学习笔记 >基础和指令 基础和指令
vue模板引用ref（就是获取dom操作dom元素）
作者：小萝卜 2024-03-10 【 Vue 】 浏览 91
简介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>
很赞哦！ (0)
