在通過文本字段從用戶那里獲取輸入后，必須有一種方法來檢索數據并對其進行某些操作。在本文中，我們將學習如何在 Vue 中輕松獲取輸入字段的值。

　　v 模型指令

　　要在 Vue 中獲取輸入值，我們可以使用該指令在值和變量之間設置雙向綁定。

　　例如：

　　每次用戶更改輸入字段中的文本時，變量都會自動更新。然后，我們可以使用此變量來執行操作或顯示信息。在此示例中，我們只是在其下方顯示輸入的值。

　　將 Vue 計算屬性與輸入值結合使用

　　我們可以使用計算屬性來顯示從值派生的信息，而不僅僅是按原樣在輸入字段中顯示值。

　　例如，我們可以顯示值的字符數：

　　如何在更改時獲取輸入值

　　我們可以為組件的事件創建一個處理程序，以便在輸入值更改時使用該操作。我們可以使用指令 () 偵聽事件，指令可以縮短為符號 ()。

　　在下面的示例中，我們使用事件在開發人員控制臺中記錄新的輸入值，當新輸入值發生更改時。

　　我們還可以將事件實現輸入字段值和變量之間的自定義單向綁定。代替 ，我們可以使用 prop 來手動設置輸入中的文本。

　　在以下示例中，我們使用事件和 prop 將輸入字段中輸入的卡號的數字分隔開來，并提供更好的用戶體驗。

　　如何使用引用獲取輸入值

　　在大多數情況下，和/將足以讀取或更新輸入字段的值。但是，我們也可以使用屬性來獲取輸入值。我們可以在任何 DOM 元素上設置此屬性，并使用 Vue 實例的屬性來訪問表示該元素的對象。

　　例如：