當(dāng)我們使用Vue來構(gòu)建Web應(yīng)用程序時(shí)，我們有時(shí)需要將數(shù)據(jù)從JavaScript代碼傳遞到頁面中的各種元素。Vue提供了一個(gè)名為v-model的可自定義指令，它允許我們將表單輸入元素和應(yīng)用程序數(shù)據(jù)之間進(jìn)行雙向數(shù)據(jù)綁定。
在Vue中，v-model指令可以用來實(shí)現(xiàn)表單控件的雙向數(shù)據(jù)綁定。我們可以使用v-model指令將表單控件的值綁定到Vue實(shí)例的數(shù)據(jù)屬性上。在表單提交時(shí)，這些數(shù)據(jù)屬性將在Vue實(shí)例中更新。由于雙向綁定，當(dāng)Vue實(shí)例中的數(shù)據(jù)屬性的值更改時(shí)，表單控件中的值也將相應(yīng)地更新。
在上面的示例中，v-model指令將輸入元素的值與實(shí)例的message屬性進(jìn)行綁定。每當(dāng)輸入元素的值更改時(shí)，實(shí)例的message屬性也將更新，反之亦然。
使用v-model指令，我們可以將多個(gè)表單元素綁定到Vue實(shí)例的數(shù)據(jù)屬性上。在下面的示例中，我們將綁定兩個(gè)輸入元素和一個(gè)文本框到Vue實(shí)例的數(shù)據(jù)屬性。
當(dāng)我們需要更改輸入元素的默認(rèn)行為時(shí)，我們可以為v-model指令添加參數(shù)。例如，當(dāng)綁定單選框時(shí)，我們可以將v-model指令的參數(shù)設(shè)置為單選框的值。在下面的示例中，我們將兩個(gè)單選框綁定到Vue實(shí)例的數(shù)據(jù)屬性sex上。
一般情況下，v-model指令會(huì)在表單控件的change事件觸發(fā)后更新Vue實(shí)例的數(shù)據(jù)屬性。如果我們希望在輸入事件觸發(fā)后立即更新數(shù)據(jù)屬性，我們可以使用v-model指令的修飾符。例如，修飾符.lazy將表單控件的值綁定到Vue實(shí)例的數(shù)據(jù)屬性后，只有在change事件觸發(fā)時(shí)才會(huì)更新數(shù)據(jù)屬性。另一個(gè)修飾符.number將輸入元素的值轉(zhuǎn)換為數(shù)字。
除了表單控件外，我們還可以將v-model指令用于各種HTML元素。例如，我們可以將它綁定到內(nèi)容可編輯的div元素上：
在Vue的實(shí)現(xiàn)中，v-model指令實(shí)際上是一個(gè)語法糖。它與Vue實(shí)例的data屬性和表單控件的事件處理程序之間進(jìn)行了轉(zhuǎn)換。當(dāng)我們使用v-model指令時(shí)，Vue會(huì)自動(dòng)為我們處理節(jié)點(diǎn)值的獲取和設(shè)置，并維護(hù)數(shù)據(jù)屬性和DOM之間的動(dòng)態(tài)綁定。因此，我們可以輕松地實(shí)現(xiàn)表單控件和其他HTML元素的雙向數(shù)據(jù)綁定。