v-model的基本使用

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

比如用戶在登錄、注冊(cè)時(shí)需要提交賬號(hào)密碼；

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

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

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

它會(huì)根據(jù)控件類(lèi)型自動(dòng)選取正確的方法來(lái)更新元素；

盡管有些神奇，但 v-model 本質(zhì)上不過(guò)是語(yǔ)法糖，它負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件來(lái)更新數(shù)據(jù)，并在某種極端場(chǎng)景

下進(jìn)行一些特殊處理；

v-model的原理

官方有說(shuō)到，v-model的原理其實(shí)是背后有兩個(gè)操作：

v-bind綁定value屬性的值；

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

v-model綁定textarea

我們?cè)賮?lái)綁定一下其他的表單類(lèi)型：textarea、checkbox、radio、select

我們來(lái)看一下綁定textarea：

v-model綁定checkbox

我們來(lái)看一下v-model綁定checkbox：?jiǎn)蝹€(gè)勾選框和多個(gè)勾選框

單個(gè)勾選框：

v-model即為布爾值。

此時(shí)input的value并不影響v-model的值。

多個(gè)復(fù)選框：

當(dāng)是多個(gè)復(fù)選框時(shí)，因?yàn)榭梢赃x中多個(gè)，所以對(duì)應(yīng)的data中屬性是一個(gè)數(shù)組。

當(dāng)選中某一個(gè)時(shí)，就會(huì)將input的value添加到數(shù)組中。

v-model綁定radio

v-model綁定radio，用于選擇其中一項(xiàng)；

v-model綁定select

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

單選：只能選中一個(gè)值

v-model綁定的是一個(gè)值；

當(dāng)我們選中option中的一個(gè)時(shí)，會(huì)將它對(duì)應(yīng)的value賦值到fruit中；

多選：可以選中多個(gè)值

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

當(dāng)選中多個(gè)值時(shí)，就會(huì)將選中的option對(duì)應(yīng)的value添加到數(shù)組fruit中；

v-model的值綁定

目前我們?cè)谇懊娴陌咐写蟛糠值闹刀际窃趖emplate中固定好的：

比如gender的兩個(gè)輸入框值male、female；

比如hobbies的三個(gè)輸入框值basketball、football、tennis；

在真實(shí)開(kāi)發(fā)中，我們的數(shù)據(jù)可能是來(lái)自服務(wù)器的，那么我們就可以先將值請(qǐng)求下來(lái)，綁定到data返回的對(duì)象中，再通過(guò)v-bind來(lái)進(jìn)行值的綁定，這個(gè)過(guò)程就是值綁定。

這里不再給出具體的做法，因?yàn)檫€是v-bind的使用過(guò)程。

v-model修飾符 - lazy

lazy修飾符是什么作用呢？

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

如果我們?cè)趘-model后跟上lazy修飾符，那么會(huì)將綁定的事件切換為 change 事件，只有在提交時(shí)（比如回車(chē)）

才會(huì)觸發(fā)

v-model修飾符 - number

我們先來(lái)看一下v-model綁定后的值是什么類(lèi)型的：

message總是string類(lèi)型，即使在我們?cè)O(shè)置type為number也是string類(lèi)型；

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

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

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

v-model修飾符 - trim

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

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

實(shí)際上v-model 只是語(yǔ)法糖而已。

<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',
            //這個(gè)事件名可以隨意寫(xiě)，它實(shí)際上是規(guī)定了子組件要更新父組件值需要注冊(cè)的方法
            event: 'ababab'
        }
    }
</script>
<style lang="scss" scoped>
</style>

原理：

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

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

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

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

總結(jié) 

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

最新評(píng)論