Vue 3 核心教學：掌握 表單輸入綁定（v-model）與資料互動實務

在開發 Web 應用程式時，表單（Form）是收集使用者資料、實現人機互動的核心橋樑。無論是簡單的會員登入、複雜的商品篩選條件，還是龐大的多步驟問卷，前端開發者都需要即時且精準地同步畫面輸入與 JavaScript 資料狀態。

在 Vue 3 中，這一切的魔法都源自於 v-model 指令。本文將帶您全面拆解 Vue 3 在各種傳統與現代表單元件上的綁定語法、底層運行機制，以及實務開發必備的修飾符絕招。

什麼是 v-model？直擊雙向綁定的底層原理

在傳統 JavaScript 中，要處理表單更新，我們必須手動 監聽 input 或 change 事件，再將數值寫回變數。

Vue 3 的 v-model 是一個 語法糖（Sugar Syntax），它幫我們自動實現了雙向綁定（Two-way Data Binding）：

1. 從資料到畫面：當 JS 變數改變時，輸入框的值會跟著變。
2. 從畫面到資料：當使用者在輸入框打字時，JS 變數會即時同步。

各類型表單元件綁定實戰

不同類型的 HTML 表單元件，其內建的數值觸發機制不盡相同，有些是 text，有些是 checked。Vue 3 聰明地幫我們封裝了這些細節，讓我們用統一的 v-model 就能輕鬆駕馭。

單行/多行文字輸入框（Input / Textarea）

最常見的基礎綁定，資料類型通常為字串。

const name = ref('');

<input v-model="name" type="text">
<p>大家好！我是 {{ name }}</p>

單選框（Radio）

多個單選框若綁定到同一個變數，Vue 會根據 value 屬性自動判定哪一個被選中。資料類型為單一值。

const gender = ref('male'); // 預設選取 'male'

<input v-model="gender" type="radio" value="Male" id="Male">
<label for="Male">Male</label>

<input v-model="gender" type="radio" value="Female" id="Female">
<label for="Female">Female</label>

<p>選取到：{{ gender }}</p>

複選框（Checkbox）

複選框通常有兩種場景：

• 單一開關：功能啟用與否，綁定布林值。

  const isActive = ref(false);

  <input v-model="isActive" type="checkbox" id="Active">
  <label for="Active">啟用</label>
  
  <p>狀態：{{ isActive }}</p>

• 多選組合：興趣愛好，多個核取方塊綁定到同一個陣列。

  const hobbies = ref([]);

  <input v-model="hobbies" type="checkbox" value="Reading" id="Reading">
  <label for="Reading">Reading</label>
  
  <input v-model="hobbies" type="checkbox" value="Painting" id="Painting">
  <label for="Painting">Painting</label>
  
  <input v-model="hobbies" type="checkbox" value="Coding" id="Coding">
  <label for="Coding">Coding</label>
  
  <input v-model="hobbies" type="checkbox" value="Walking" id="Walking">
  <label for="Walking">Walking</label>
  
  <input v-model="hobbies" type="checkbox" value="Eating" id="Eating">
  <label for="Eating">Eating</label>
  
  <p>選取到：{{ hobbies }}</p>

下拉選單（Select）

單選時綁定單一值，加上 multiple 屬性可以進行多選，綁定陣列。

const country = ref('');

<select v-model="country">
  <option value="" disabled>請選擇國籍...</option>
  <option>台灣</option>
  <option>美國</option>
  <option>日本</option>
</select>
<p>國籍：{{ country || '未選取' }}</p>

實務開發大絕招：三大核心修飾符

表單輸入常常需要做前端防呆或資料格式清洗。Vue 內建了三個超實用的 v-model 修飾符，能讓您少寫好幾行資料處理邏輯。

修飾符	說明	範例
.lazy	失去焦點後才同步	v-model.lazy="msg"
.number	自動將輸入值轉換為數字型別	v-model.number="age"
.trim	自動去除輸入值的前後空白	v-model.trim="name"

總結：高效管理表單的心法

快速複習 Vue 3 表單控制的最佳實踐：

• 善用資料驅動：永遠先想好您的 響應式資料 結構。單選綁字串/數字，多選群組（Checkbox/Select）務必初始化為空陣列 []。
• 修飾符不可少：涉及數字計算必定搭配 .number；涉及文字比對、上傳，必定搭配 .trim 防呆。
• 自訂元件擴充：Vue 3 允許我們在自訂元件上定義複數個 v-model，例如：v-model:title 和 v-model:content，這是建構大型複雜表單系統的重要利器。

常見問題

v-model 的本質是什麼？

它是語法糖，等同於同時綁定 value 屬性與監聽 input 事件。Vue 會依照表單元件的類型自動選用對應的屬性與事件，讓開發者用一致的寫法處理所有欄位。

複選框要綁字串還是陣列？

單一開關綁布林值；多個選項共用同一個變數時要初始化為空陣列 []，Vue 才會把勾選的 value 依序放進陣列裡。

為什麼輸入的數字拿到的是字串？

HTML 輸入框的值本來就是字串，即使 type="number" 也一樣。加上 .number 修飾符即可讓 Vue 自動轉型，避免相加變成字串串接。

.lazy 修飾符的作用是什麼？

預設 v-model 監聽 input 事件，每打一個字就同步；加上 .lazy 會改成監聽 change 事件，等到失去焦點或按下 Enter 才同步，適合不需要即時回饋的欄位。

v-model 可以和 value 屬性一起用嗎？

文字輸入框不行，v-model 會覆蓋 value。但 radio 與 checkbox 需要 value 來標示各選項代表的值，這是必要且正確的搭配。

自訂元件可以用 v-model 嗎？

可以。元件透過 defineModel 或 modelValue 搭配 update:modelValue 事件即可支援 v-model，而且能定義多個具名的 v-model。

延伸閱讀

鍵盤事件修飾符：keyup.enter事件處理：v-on 與參數傳遞響應式基礎：ref 與 reactive