F2E 前端工程文件

Appearance

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） ​

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

js
const name = ref("");
html
<input v-model="name" type="text" />
<p>大家好！我是 {{ name }}</p>

單選框（Radio） ​

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

js
const gender = ref("male"); // 預設選取 'male'
html
<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） ​

複選框通常有兩種場景：

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

    js
    const isActive = ref(false);
    html
    <input v-model="isActive" type="checkbox" id="Active" />
<label for="Active">啟用</label>

<p>狀態：{{ isActive }}</p>

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

    js
    const hobbies = ref([]);
    html
    <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 屬性可以進行多選，綁定陣列。

js
const country = ref("");
html
<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，這是建構大型複雜表單系統的重要利器。

Copyright © 2025-Present