在通過文本字段從用戶那里獲取輸入后，必須有一種方法來檢索數(shù)據(jù)并對其進(jìn)行某些操作。在本文中，我們將學(xué)習(xí)如何在 Vue 中輕松獲取輸入字段的值。
v 模型指令
要在 Vue 中獲取輸入值，我們可以使用該指令在值和變量之間設(shè)置雙向綁定。
例如：
每次用戶更改輸入字段中的文本時，變量都會自動更新。然后，我們可以使用此變量來執(zhí)行操作或顯示信息。在此示例中，我們只是在其下方顯示輸入的值。
將 Vue 計算屬性與輸入值結(jié)合使用
我們可以使用計算屬性來顯示從值派生的信息，而不僅僅是按原樣在輸入字段中顯示值。
例如，我們可以顯示值的字符數(shù)：
如何在更改時獲取輸入值
我們可以為組件的事件創(chuàng)建一個處理程序，以便在輸入值更改時使用該操作。我們可以使用指令 () 偵聽事件，指令可以縮短為符號 ()。
在下面的示例中，我們使用事件在開發(fā)人員控制臺中記錄新的輸入值，當(dāng)新輸入值發(fā)生更改時。
我們還可以將事件實現(xiàn)輸入字段值和變量之間的自定義單向綁定。代替 ，我們可以使用 prop 來手動設(shè)置輸入中的文本。
在以下示例中，我們使用事件和 prop 將輸入字段中輸入的卡號的數(shù)字分隔開來，并提供更好的用戶體驗。
如何使用引用獲取輸入值
在大多數(shù)情況下，和/將足以讀取或更新輸入字段的值。但是，我們也可以使用屬性來獲取輸入值。我們可以在任何 DOM 元素上設(shè)置此屬性，并使用 Vue 實例的屬性來訪問表示該元素的對象。
例如：
京公網(wǎng)安備 11010802030320號