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/>
    
 

1. @input 监听输入框

//输入框只要输入的值变化了就会触发 input 调用 search    
<template>
    <div class="class">
        <div>
            <input type="text" @input="search"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Search",
        data() {
        },
        methods: {
            search(event){
                console.log( event.currentTarget.value )
            }
        }
    }
</script>

1. @change 监听输入框

//输入框失去焦点时，输入的值发生了变化，就会触发 change 事件
<template>
    <div class="class">
        <div>
            <input type="text" @change="search"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Search",
        data() {
        },
        methods: {
            search(event){
                console.log( event.target.value )
            }
        }
    }
</script>

1. ref 获取数据

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