在 Web 開發中，表單是用戶與系統交互的重要方式。無論是注冊、登錄、提交評論還是其他操作，都需要通過表單獲取用戶輸入的數據。Vue.js 提供了強大的響應式系統和指令，使得表單數據的收集變得簡單而高效。本文將詳細介紹如何在 Vue 中實現表單數據的收集與處理，包括基本輸入綁定、表單驗證以及常見注意事項。

一、基礎用法：使用 v-model 實現雙向綁定

Vue 提供了 v-model 指令來實現表單元素與組件數據之間的雙向綁定。這是最常用也是最推薦的方式。

示例：收集文本輸入

<template><div><label>姓名：</label><input type="text" v-model="formData.name" /><p>你輸入的名字是：{{ formData.name }}</p></div>
</template><script>
export default {data() {return {formData: {name: ''}}}
}
</script>

在這個例子中，當用戶在輸入框中輸入內容時，formData.name 會自動更新；反之，如果我們在 JS 中修改 formData.name，輸入框的內容也會同步變化。

示例：多類型表單控件綁定

1. 單選框（radio）

<label><input type="radio" value="男" v-model="formData.gender"> 男</label>
<label><input type="radio" value="女" v-model="formData.gender"> 女</label>
<p>性別：{{ formData.gender }}</p>

2. 復選框（checkbox）

• 單個復選框綁定布爾值

<label><input type="checkbox" v-model="formData.isAgree"> 我同意協議</label>
<p>是否同意協議：{{ formData.isAgree ? '是' : '否' }}</p>

• 多個復選框綁定數組

<label><input type="checkbox" value="籃球" v-model="formData.hobbies"> 籃球</label>
<label><input type="checkbox" value="足球" v-model="formData.hobbies"> 足球</label>
<label><input type="checkbox" value="羽毛球" v-model="formData.hobbies"> 羽毛球</label>
<p>愛好：{{ formData.hobbies.join('、') }}</p>

3. 下拉選擇框（select）

<select v-model="formData.favoriteColor"><option value="">請選擇顏色</option><option value="red">紅色</option><option value="blue">藍色</option><option value="green">綠色</option>
</select>
<p>最喜歡的顏色：{{ formData.favoriteColor }}</p>

二、高級用法：結合表單提交與驗證

1. 表單提交事件處理

通常我們使用 <form> 標簽包裹表單，并通過 @submit.prevent 阻止默認提交行為，進行自定義處理。

<template><form @submit.prevent="handleSubmit"><label>用戶名：<input type="text" v-model="formData.username"></label><br/><label>密碼：<input type="password" v-model="formData.password"></label><br/><button type="submit">提交</button></form>
</template><script>
export default {data() {return {formData: {username: '',password: ''}}},methods: {handleSubmit() {console.log('提交的數據為：', this.formData);// 可以在這里發起 API 請求}}
}
</script>

2. 表單驗證基礎

雖然 Vue 本身沒有內置的表單驗證機制，但我們可以手動添加驗證邏輯：

methods: {handleSubmit() {if (!this.formData.username.trim()) {alert('用戶名不能為空');return;}if (this.formData.password.length < 6) {alert('密碼不能少于6位');return;}// 提交數據console.log('驗證通過，提交數據：', this.formData);}
}

也可以使用第三方庫如 Vuelidate 或 VeeValidate 進行更復雜的驗證。

三、注意事項與最佳實踐

? 使用對象管理表單數據

避免將每個字段單獨放在 data() 中，建議統一放入一個 formData 對象中，便于維護和提交。

data() {return {formData: {username: '',email: '',age: null,gender: '',hobbies: []}}
}

? 正確使用 key 屬性

當動態渲染表單控件時，確保給每個組件設置唯一 key，防止 Vue 緩存舊數據。

? 清空表單數據

提交后清空表單是一個良好的用戶體驗：

this.formData = {username: '',password: '',gender: '',hobbies: []
};

? 避免直接操作 DOM

不要使用 ref 直接獲取并修改 input 的值，應始終使用 v-model 和數據驅動的方式控制表單狀態。

結語

感謝您的閱讀！如果你有任何疑問或想要分享的經驗，請在評論區留言交流！