摘要

v-model 可搭配修飾符來改變其預設行為：.lazy 改為在 change 事件同步，.number 自動轉換為數字，.trim 自動過濾首尾空白。

定義與說明

.lazy

將資料同步的時機從即時的 input 事件延遲到 change 事件（通常是輸入框失去焦點時）。

.number

自動將使用者的輸入值嘗試轉換為 Number 型別。

.trim

自動去除使用者輸入內容的首尾空白字元。

實作範例

HTML Template

<!-- 失去焦點時才更新資料 -->
<input v-model.lazy="msg" />

<!-- 輸入的值會被當作數字處理 -->
<input v-model.number="age" />

<!-- 自動去除前後空白 -->
<input v-model.trim="username" />

結論

v-model 的修飾符是方便的內建工具，讓我們可以直接在模板中處理常見的資料格式化和更新時機問題，無需編寫額外的 JavaScript 邏輯。

v-model 修飾符 .lazy .number .trim