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