v-model的基本使用

表單提交是開發(fā)中非常常見的功能，也是和用戶交互的重要手段：

比如用戶在登錄、注冊時需要提交賬號密碼；

比如用戶在檢索、創(chuàng)建、更新信息時，需要提交一些數(shù)據(jù)；

這些都要求我們可以在代碼邏輯中獲取到用戶提交的數(shù)據(jù)，我們通常會使用v-model指令來完成：

v-model指令可以在表單 input、textarea以及select元素上創(chuàng)建雙向數(shù)據(jù)綁定；

它會根據(jù)控件類型自動選取正確的方法來更新元素；

盡管有些神奇，但 v-model 本質(zhì)上不過是語法糖，它負責監(jiān)聽用戶的輸入事件來更新數(shù)據(jù)，并在某種極端場景

下進行一些特殊處理；

v-model的原理

官方有說到，v-model的原理其實是背后有兩個操作：

v-bind綁定value屬性的值；

v-on綁定input事件監(jiān)聽到函數(shù)中，函數(shù)會獲取最新的值賦值到綁定的屬性中；

v-model綁定textarea

我們再來綁定一下其他的表單類型：textarea、checkbox、radio、select

我們來看一下綁定textarea：

v-model綁定checkbox

我們來看一下v-model綁定checkbox：單個勾選框和多個勾選框

單個勾選框：

v-model即為布爾值。

此時input的value并不影響v-model的值。

多個復選框：

當是多個復選框時，因為可以選中多個，所以對應(yīng)的data中屬性是一個數(shù)組。

當選中某一個時，就會將input的value添加到數(shù)組中。

v-model綁定radio

v-model綁定radio，用于選擇其中一項；

v-model綁定select

和checkbox一樣，select也分單選和多選兩種情況。

單選：只能選中一個值

v-model綁定的是一個值；

當我們選中option中的一個時，會將它對應(yīng)的value賦值到fruit中；

多選：可以選中多個值

v-model綁定的是一個數(shù)組；

當選中多個值時，就會將選中的option對應(yīng)的value添加到數(shù)組fruit中；

v-model的值綁定

目前我們在前面的案例中大部分的值都是在template中固定好的：

比如gender的兩個輸入框值male、female；

比如hobbies的三個輸入框值basketball、football、tennis；

在真實開發(fā)中，我們的數(shù)據(jù)可能是來自服務(wù)器的，那么我們就可以先將值請求下來，綁定到data返回的對象中，再通過v-bind來進行值的綁定，這個過程就是值綁定。

這里不再給出具體的做法，因為還是v-bind的使用過程。

v-model修飾符 - lazy

lazy修飾符是什么作用呢？

默認情況下，v-model在進行雙向綁定時，綁定的是input事件，那么會在每次內(nèi)容輸入后就將最新的值和綁定的屬性進行同步；

如果我們在v-model后跟上lazy修飾符，那么會將綁定的事件切換為 change 事件，只有在提交時（比如回車）

才會觸發(fā)

v-model修飾符 - number

我們先來看一下v-model綁定后的值是什么類型的：

message總是string類型，即使在我們設(shè)置type為number也是string類型；

如果我們希望轉(zhuǎn)換為數(shù)字類型，那么可以使用 .number 修飾符：

另外，在我們進行邏輯判斷時，如果是一個string類型，在可以轉(zhuǎn)化的情況下會進行隱式轉(zhuǎn)換的：

下面的score在進行判斷的過程中會進行隱式轉(zhuǎn)化的

v-model修飾符 - trim

如果要自動過濾用戶輸入的守衛(wèi)空白字符，可以給v-model添加 trim 修飾符

附：父子組件v-model綁定的參數(shù)進行通信

實際上v-model 只是語法糖而已。

<input v-model="inputValue" />
<input v-bind:value="inputValue" v-on:input="inputValue= $event.target.value" />

父組件

<template>
 <div id="demo">
  <test-model v-model="inputValue"></test-model>
  <span>{{inputValue}}</span>
</div>
</template>
<script>
    import testModel from 'src/components/testModel'
    export default {
      data(){
            return{
                 inputValue: "inputValue"
            }
        },
        components: {
            testModel,
        }
    }
</script>

<style lang="scss" scoped>
</style>

子組件

<template>
<span>
      <input
        ref="input"
        :value="value"
        @input="$emit('ababab', $event.target.value)"
      >
    </span>
</template>
<script>
    export default {
        data(){
            return{
            }
        },
        props: ["value"],
        model: {
            prop: 'value',
            //這個事件名可以隨意寫，它實際上是規(guī)定了子組件要更新父組件值需要注冊的方法
            event: 'ababab'
        }
    }
</script>
<style lang="scss" scoped>
</style>

原理：

1.展示：父組件v-model，子組件接收一個props值value，將它展示到子組件自己的input上。

2.改變：當子組件自身發(fā)生改變時，觸發(fā)自身的input方法，然后觸發(fā)父組件的事件方法，改變父組件的value，進而改變接收的props，實現(xiàn)自身展示的改變

例子中使用了model,官網(wǎng)是這樣說的，實際上是為了單選框,復選框按鈕等情況的時候，他們的值并不是value，而是checked,這種情況下，就需要寫這個。

model: {
    prop: 'checked',
    event: 'change'
  },

總結(jié) 

到此這篇關(guān)于vue v-model的詳細講解的文章就介紹到這了,更多相關(guān)vue v-model講解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論