Vue 三种常用获取input值的方法

1. v-model 表单输入绑定

//使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理	<template>
	    <div>
	        <input class="login-input" type="text"  v-model="username" placeholder="请输入账号">
	        <input class="login-input" type="password" v-model="password" placeholder="请输入密码">
			<div class="login-button" @click="login" type="submit">登陆</div>
	    </div>
	</template>
	<script>
	export default {
       name: 'Login',
        data() {
            return {
                username: '',
                password: ''
            }
        },
        methods: {
            login() {
                   console.log(this.username)
                   console.log(this.password)
            }
        }
    }
	<script/>
	

2. @input 监听输入框

//输入框只要输入的值变化了就会触发 input 调用 search 数据实时获取通过 event.currentTarget.value 获取到	
<template>
	  <div class="class">
	    <div>
	      <input type="text" @keyup.enter="search" @input="search($event)"/>
	    </div>
	  </div>
	</template>
	<script>
    export default {
      name: "search",
      data() {
      },
      methods: {
	        search(event){
	          console.log(event.currentTarget.value)
	        }
      	}
    }
   </script>

3. ref 获取数据

//这种方式类似于原生DOM,但是ref获取数据更方便
	<template>
	  <div class="class">
	      <input type="text" ref="getValue" />
	      <button @click="subbmitButton">获取表单数据</button>
	  </div>
	</template>
	<script>
    export default {
      name: "page",
      data() {
      },
      methods: {
	        subbmitButton(){
	          console.log(this.$refs.getValue.value)
	        }
      	}
    }
  </script>

版权声明：本文为CSDN博主「June.1」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：vue三种常用获取input值写法_June.1-CSDN博客_vue获取input的value值