本篇文章透過程式碼實例，帶你了解v-model。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
Vue v-model是一個指令，它提供了input和form 之間或兩個元件之間的雙向資料綁定。 【相關推薦：vue.js教學】
這是Vue開發中的一個簡單概念，但v-model的真正威力需要花些時間才能理解。
本文主要講解v-model的不同用例，並學習如何在自己的專案中使用它。
剛剛講過，`v-model是一個我們可以在模板程式碼中使用的指令。指令是一個模板令牌，它告訴 Vue 我們想要如何處理 DOM。
在v-model的情況下，它告訴Vue我們想要在template 中的值和data屬性中的值之間創建一個雙向資料綁定。
使用v-model的一個常見用例是在設計表單相關的一些元素時。我們可以使用它來使input元素能夠修改Vue實例中的資料。
<template>
<div>
<input
type='text'
v-model='value'
/>
<p> Value: {{ value }} </p>
</div>
</template>
<script>
export default {
data() {
return {
value: 'Hello World'
}
}
}
</script>當我們在input中輸入內容時，我們會看到我們的資料屬性正在變更
![上傳...]()
v-bind指令通常會與v-model切換。兩者的差異在於v-model提供了雙向資料綁定。
在我們的例子中，這意味著如果我們的資料改變了，我們的input也會改變，如果我們的input改變了，我們的數據也會改變。
而 v-bind 只以一種方式綁定資料。
當我們想要在自己的應用程式中建立一個清晰的單向資料流時，這是非常有用的。但是，在v-model和v-bind之間選擇時必須小心。
Vue 提供了兩個修飾符，讓我們可以更改v-model的函數。每一個都可以像這樣加起來，甚至可以連在一起。
<input type='text' v-model.trim.lazy='value' />
預設情況下，v-model在每個input事件上與Vue實例的狀態（資料屬性）同步。這包括獲得/失去焦點等。
.lazy修改器修改了我們的v-model，所以它只在更改事件之後同步。這減少了v-model試圖與Vue實例同步的次數，在某些情況下，還可以提高效能。
通常，即使輸入的是數字類型，input也會自動將輸入的值變成字串。確保將我們的值作為數字處理的一種方法是使用.number修飾符。
根據Vue文檔，如果input發生變化，並且parseFloat()無法解析新值，那麼將返回輸入的最後一個有效值。
<input type='number' v-model.number='value' />
與大多數程式語言中的trim方法類似，.trim修飾符在傳回值之前刪除開頭或結尾的空白。
在Vue中，資料綁定有兩個主要步驟：
從父節點傳遞資料
從子實例發出事件以更新父實例
#在自訂元件上使用v-model可以讓我們傳遞一個prop，用一個指令來處理一個事件。
<custom-text-input v-model="value" /> <!-- IS THE SAME AS --> <custom-text-input :modelValue="value" @update:modelValue="value = $event" />
使用v-model傳遞的值的預設名稱是modelValue。但是，我們也可以像這樣傳遞一個自訂名稱。
<custom-text-input v-model:name="value" />
注意：當我們使用自訂模型名稱時，發出的方法的名稱將為update:name。
在自訂元件中使用v-mode ，需要做兩件事：
在props 中接收v-model 的值。
當對應的值變化時，發出更新事件
#ok，首先來宣告：
export default {
props: {
modelValue: String,
}
}接下來，將modelValue 綁定到需要的元素，當值變化時，我們就透過update:modelValue 發出新值。
這樣就可以實現雙向綁定了。
上面介绍了如果在自定义组件中使用 v-model，现在来看看一些v-model指令更高级的用法。
v-model并不局限于每个组件只能使用一个。要多次使用v-model，我们只需要确保唯一命名，并在子组件中正确访问它。
为下面的组件添加第二个 v-model，这里先命名为 lastName:
<template>
<div>
<custom-text-input
v-model='value'
v-model:lastName='lastName'
/>
<p> Value: {{ value }} </p>
<p> Last Name: {{ lastName }} </p>
</div>
</template>
<script>
import CustomTextInput from './CustomTextInput.vue'
export default {
components: {
CustomTextInput,
},
data() {
return {
value: 'Matt',
lastName: 'Maribojoc'
}
}
}
</script>然后，我们内部的子组件:
<template>
<div>
<label> First Name </label>
<input
type='text'
:value='modelValue'
placeholder='Input'
@input='$emit("update:modelValue", $event.target.value)'
/>
<label> Last Name </label>
<input
type='text'
:value='lastName'
placeholder='Input'
@input='$emit("update:lastName", $event.target.value)'
/>
</div>
</template>
<script>
export default {
props: {
lastName: String,
modelValue: String,
}
}
</script>运行后，可以看到两个 v-model 都可以正常工作：
Vue中内置了一些修饰符，但这些远远不够，所以有时我们需要自定义自己的修饰符。
假设我们要创建一个修饰符，以删除输入的文本中的所有空格。 我们称之为no-whitespace ：
<custom-text-input v-model.no-whitespace='value' v-model:lastName='lastName' />
在组件内，我们可以使用 props 来捕获修改器。自定义修饰符的名称是nameModifiers
props: {
lastName: String,
modelValue: String,
modelModifiers: {
default: () => ({})
}
},我们要做的第一件事是改变@input处理器来使用一个自定义方法。我们可以称它为emitValue，它接受正在编辑的属性和事件对象的名称。
<label> First Name </label>
<input
type='text'
:value='modelValue'
placeholder='Input'
@input='emitValue("modelValue", $event)'
/>在emitValue方法中，在调用$emit之前，我们要检查修饰符。如果no-whitespace修饰符为true，则可以在将其发送给父对象之前修改该值。
emitValue(propName, evt) {
let val = evt.target.value
if (this.modelModifiers['no-whitespace']) {
val = val.replace(/\s/g, '')
}
this.$emit(`update:${propName}`, val)
}运行，完美：
希望本文能教给大家一些有关Vue v-model的新知识。
在它的基本用例(如表单和input数据)中，v-model是一个非常简单的概念。然而，当我们创建自定义组件并处理更复杂的数据时，我们可以释放v-model的真正威力。
原文地址：https://learnvue.co/2021/01/everything-you-need-to-know-about-vue-v-model/
作者：Michael Thiessen
更多编程相关知识，请访问：编程视频！！
以上是透過程式碼實例，帶你了解v-model（值得收藏）！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
