vue獲取input值的三種常用寫法

更新時間：2022年08月10日 09:55:24 作者：June.1

這篇文章主要介紹了vue獲取input值的三種常用寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

1. v-model 表單輸入綁定

使用v-model創(chuàng)建雙向數(shù)據(jù)綁定, 用來監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進行一些特殊處理。

?? ?<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 監(jiān)聽輸入框

輸入框只要輸入的值變化了就會觸發(fā) input 調(diào)用 search 數(shù)據(jù)實時獲取通過 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 獲取數(shù)據(jù)

這種方式類似于原生DOM,但是ref獲取數(shù)據(jù)更方便

?? ?<template>
?? ? ?<div class="class">
?? ? ? ? ?<input type="text" ref="getValue" />
?? ? ? ? ?<button @click="subbmitButton">獲取表單數(shù)據(jù)</button>
?? ? ?</div>
?? ?</template>

?? ?<script>
? ? export default {
? ? ? name: "page",
? ? ? data() {
? ? ? },
? ? ? methods: {
?? ? ? ? ? ?subbmitButton(){
?? ? ? ? ? ? ?console.log(this.$refs.getValue.value)
?? ? ? ? ? ?}
? ? ? ?? ?}
? ? }
? </script>

vue收集input[type=“checkbox”]的值

input[type=“checkbox”]，勾選or不勾選

要控制input[type=“checkbox”]勾選或不勾選，有以下兩種方式，

v-model="isDone"。isDone為true時，勾選；isDone為false時，不勾選
:checked="isDone"。isDone為true時，勾選，isDone為false時，不勾選

注意哈??！此時isDone必須初始化為布爾值（或者可布爾化的類型，如字符串，數(shù)值，非0即1）

v-model

<body>
    <div id="root">
        <input type="checkbox" v-model="isDone"/>已經(jīng)完成
        <button @click="handleClick">勾選/去勾選</button>
    </div>

    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data(){
            return {
                isDone:false
            }
        },
        methods: {
            handleClick(){
                this.isDone = !this.isDone;
            }
        },
        watch:{
            isDone:{
                immediate:true,
                handler(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            }
        }
    })
    </script>
</body>

:checked

<body>
    <div id="root">
        <input type="checkbox" :checked="isDone"/>已經(jīng)完成
        <button @click="handleClick">勾選/去勾選</button>
    </div>

    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data(){
            return {
                isDone:false
            }
        },
        methods: {
            handleClick(){
                this.isDone = !this.isDone;
            }
        },
        watch:{
            isDone:{
                immediate:true,
                handler(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            }
        }
    })
    </script>
</body>

input[type=“checkbox”]多個時，哪些被選中

多個input[type="checkbox"]時，想知道哪些被選中，使用v-model，如v-model="hobbies"。

注意哈！！此時hobbies必須初始化為數(shù)組。

<body>
    <div id="root">
        <label><input type="checkbox" name="hobby" value="football" v-model="hobbies"/>足球</label><br/>
        <label><input type="checkbox" name="hobby" value="basketball" v-model="hobbies"/>籃球</label><br/>
        <label><input type="checkbox" name="hobby" value="tennis" v-model="hobbies"/>網(wǎng)球</label>
    </div>

    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data(){
            return {
                hobbies:[]
            }
        },
        watch:{
            hobbies:{
                immediate:true,
                handler(newValue){
                    console.log(newValue);
                }
            }
        }
    })
    </script>
</body>