前端新世界 - 關於 Vue v-model 你需要知道的一切－鑽石舞台

喜歡就關注我們吧

Vue裡面的v-model是一個指令，提供輸入和表單數據之間或兩個組件之間的雙向數據綁定。

這是Vue開發中一個簡單的概念，但v-model的真正用途遠不止如此。

通過學習本教程中Vue v-model的不同用例，可以幫助你掌握如何在項目中使用它。

準備好了嗎？讓我們開始！

什麼是Vue v-model？

正如之前所說，Vue v-model是我們可以在模板代碼中使用的指令。指令是模板標記，告訴Vue我們想要如何處理DOM。

而v-model則是告訴Vue在模板中的值和數據屬性中的值之間創建雙向數據綁定。

v-model的一個常見用例是在設計表單和輸入時。它可以用於使得DOM輸入元素能夠修改Vue實例中的數據。

看一個在文本輸入框上使用v-model的簡單示例。

<template><div><inputtype="text"v-model="value"/><p>Value:{{value}}</p></div></template><script>exportdefault{data(){return{value:'HelloWorld'}}}</script>

當我們在文本框中輸入中內容時，可以看到data屬性隨之發生變化。

這簡直太完美了。

v-model和v-bind的區別？

通常與v-model交換使用的指令是v-bind指令。

兩者的區別在於v-model提供了雙向數據綁定。

在示例中，雙向數據綁定意味着如果數據發生變化，輸入也發生變化；反之亦然。

但是，v-bind僅單向綁定數據。

這在app中創建明確的單向數據流時非常有用。但是在v-model和v-bind之間進行選擇時請務必小心。

v-model的修飾符

Vue提供了若干修飾符，以便允許我們更改v-model的功能。

每一個修飾符都可以像下面這種方式添加，甚至可以連接在一起。

<inputtype='text'v-model.trim.lazy='value'/>.lazy

默認情況下，v-model在每個輸入事件上與Vue實例（數據屬性）的狀態同步。這包括獲得/失去焦點。

.lazy修飾符更改v-model，因此它僅在更改事件後同步。

這減少了v-model嘗試與Vue實例同步的次數——在某些情況下，可以提高性能。

.number

通常，輸入的內容會自動地變為字符串——即使我們將輸入聲明為數字類型。

為了確保值作為數字處理，我們可以使用.number修飾符來解決。

根據Vue文檔，如果輸入更改並且parseFloat()無法解析新的值，則返回輸入的最後一個有效值。

<inputtype='number'v-model.number='value'/>.trim

與大多數編程語言中的trim方法類似，.trim修飾符在返回值之前刪除字符串前面或後面的空格。

在自定義組件中使用v-model

好的，現在我們已經了解了表單/輸入框中關於v-model的基礎知識，接下來讓我們看一下v-model的一個有趣用途——在組件之間創建雙向數據綁定。

在Vue中，數據綁定有兩個主要步驟：

傳遞父級的數據

從子級發出事件來更新父級實例

在自定義組件上使用v-model允許我們傳遞prop並通過指令處理事件。

<custom-text-inputv-model="value"/><custom-text-input:modelValue="value"@update:modelValue="value=$event"/>

那麼這到底是什麼意思？

讓我們繼續使用v-model作為表單的示例，然後使用名為CustomTextInput.vue的自定義文本輸入。

使用v-model傳遞的值，其默認名稱是modelValue，也是我們將在示例中使用的名稱。

我們可以像這樣傳遞自定義model名稱。

<custom-text-inputv-model:name="value"/>

注意：當我們使用自定義model名稱時，發出方法的名稱是update:name

以下是Vue文檔中的總結。

使用自定義組件中的v-model

在設置了父組件之後，現在讓我們從子組件訪問父組件。

在CustomTextInput.vue中我們需要做兩件事：

接受v-model值作為prop

當文本框的值改變時發出更新事件

好的，首先讓我們在腳本中將它聲明為prop。

exportdefault{props:{modelValue:String,},};

接着創建模板，將值設置作為modelValue prop，這樣每當有輸入事件時，可以通過update:modelValue發出新的值。

<template><div><label>FirstName</label><inputtype='text'placeholder='Input':value='modelValue'@input='$emit("update:modelValue",$event.target.value)'/></div></template>

現在，如果我們回過頭去查看代碼，可以看到它的運行。

使用v-model的技巧

介紹了如何使用v-model在兩個組件之間綁定數據之後，讓我們來看看v-model指令的一些更高級的方法。

對單個組件多次使用v-model

v-model不限於每個組件僅使用一次。

要多次使用v-model，只需要確保唯一命名每個prop並在子組件中正確訪問它就可以了。

讓我們向名為lastName的文本框添加第二個v-model。

在父組件中，

<template><div><custom-text-inputv-model='value'v-model:lastName='lastName'/><p>Value:{{value}}</p><p>LastName:{{lastName}}</p></div></template><script>importCustomTextInputfrom'./CustomTextInput.vue'exportdefault{components:{CustomTextInput,},data(){return{value:'Matt',lastName:'Maribojoc'}}}</script>

然後，在子組件中，

<template><div><label>FirstName</label><inputtype='text':value='modelValue'placeholder='Input'@input='$emit("update:modelValue",$event.target.value)'/><label>LastName</label><inputtype='text':value='lastName'placeholder='Input'@input='$emit("update:lastName",$event.target.value)'/></div></template><script>exportdefault{props:{lastName:String,modelValue:String,}}</script>

再去看項目，我們可以看到兩個v-model都是獨立工作的。

v-model的自定義修飾符

雖然Vue內置了一些修飾符，但有時我們也會想要添加自定義修飾符。

假設我們想要創建修飾符，用於刪除輸入中的所有空格。我們稱之為no-whitespace

<custom-text-inputv-model.no-whitespace='value'v-model:lastName='lastName'/>

在輸入框組件中，我們可以使用prop捕獲修飾符。自定義修飾符的名稱是nameModifiers

exportdefault{props:{lastName:String,modelValue:String,modelModifiers:{default:()=>({}),},},};

好的，我們要做的第一件事是更改@input處理程序以使用自定義方法。我們將它命名為為emitValue，它將接受正在編輯的屬性名以及事件對象。

<label>FirstName</label><inputtype='text':value='modelValue'placeholder='Input'@input='emitValue("modelValue",$event)'/>

emitValue方法中，在調用$emit之前，我們要檢查修飾符。如果no-whitespace修飾符為true，則可以在將其發送給父級之前修改值。

exportdefault{methods:{emitValue(propName,evt){letval=evt.target.value;if(this.modelModifiers["no-whitespace"]){val=val.replace(/\s/g,"");}this.$emit(`update:${propName}`,val);},},};

令人驚嘆。現在再來看應用程序。