vue中ref在input中详解

Posted houjl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中ref在input中详解相关的知识,希望对你有一定的参考价值。

当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值

1、v-model

<template>
    <input type="text" v-model="inputval">
</template>
export default {
  data(){
     return {
            inputval:‘‘,
        }
     },      
     watch:{
          inputval(){
               console.log(this.inputval)  
          }  
      }
}        

2、ref自定义一个方法

<template>
    <input type="text" ref="input">
</template>
export default {
  data(){
     return {
            inputval:‘‘,
        }
     },      
     watch:{
          inputval(){
               console.log(this.$refs.usernameInput.value)
          }  
      }
}        

 

以上是关于vue中ref在input中详解的主要内容,如果未能解决你的问题,请参考以下文章

vue中控制input获取焦点

Vue中ref和$refs

vue中的 ref 和 $refs

Vue3中 ref 属性详解

Vue3中 ref 属性详解

Vue 的 ref 和 React 的 refs 转发