vue表单实现
Vue 表单实现方法
双向数据绑定
使用 v-model 指令实现表单输入与应用状态的双向绑定，适用于各类表单控件。例如文本输入框：
<input v-model="message" placeholder="Edit me">
<p>Message is: {{ message }}</p>复选框处理
单个复选框绑定布尔值，多个复选框绑定数组：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<input type="checkbox" id="john" value="John" v-model="checkedNames">单选按钮处理
通过 v-model 绑定选中的值：
<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">下拉选择框
单选和多选模式的处理：
<select v-model="selected">
<option disabled value="">Please select</option>
<option>A</option>
<option>B</option>
</select>
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
</select>表单验证
结合计算属性或第三方库如 VeeValidate 进行验证：
data() {
return {
email: '',
password: ''
}
},
computed: {
emailValid() {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email)
}
}表单提交
使用 @submit.prevent 阻止默认提交行为并处理数据：
<form @submit.prevent="onSubmit">
<input v-model="email">
<button type="submit">Submit</button>
</form>
methods: {
onSubmit() {
if(this.emailValid) {
// 提交逻辑
}
}
}动态表单字段
通过 v-for 实现动态生成的表单字段：
<div v-for="(item, index) in items" :key="index">
<input v-model="item.value">
<button @click="removeItem(index)">Remove</button>
</div>
<button @click="addItem">Add Item</button>表单修饰符
常用 v-model 修饰符：
.lazy：转为 change 事件后同步.number：自动将输入转为数字.trim：自动去除首尾空格
<input v-model.lazy="msg">
<input v-model.number="age">
<input v-model.trim="text">第三方表单库
推荐使用专业表单处理库：
- VeeValidate：提供声明式验证规则
- Vuelidate：基于模型的轻量验证
- Element UI/Ant Design Vue：包含预制表单组件
这些方法覆盖了 Vue 表单开发的主要场景，可根据具体需求选择合适方案。
