Vue 3 表单处理
在 Vue 3 中，表单处理是常见的需求，Vue 提供了强大的指令和方法来简化表单控件的绑定与操作。常见的表单操作包括：输入绑定、表单验证、提交表单等。
1. 表单输入绑定
Vue 提供了 v-model 来实现表单控件与 Vue 实例之间的数据双向绑定。v-model 是 Vue 3 中的一个语法糖，用来自动将用户输入的数据绑定到组件的数据属性上。
1.1. 简单的输入框
你可以使用 v-model 来绑定 <input> 元素的值。
<template>
<div>
<input v-model="message" placeholder="Enter something" />
<p>You typed: {{ message }}</p>
</div>
</template>
<script>
export default {
setup() {
const message = ref('');
return {
message
};
}
};
</script>
在这个例子中，message 会与输入框的内容保持同步。当你输入时，message 会更新，并显示在页面上。
1.2. 复选框
对于复选框，v-model 会绑定一个布尔值。
<template>
<div>
<input type="checkbox" v-model="isChecked" />
<p>Checkbox is {{ isChecked ? 'checked' : 'unchecked' }}</p>
</div>
</template>
<script>
export default {
setup() {
const isChecked = ref(false);
return {
isChecked
};
}
};
</script>
在这里，isChecked 会根据复选框的状态为 true 或 false。
1.3. 单选按钮（Radio）
对于单选按钮，v-model 绑定的是被选中的按钮的值。
<template>
<div>
<input type="radio" v-model="picked" value="A" /> A
<input type="radio" v-model="picked" value="B" /> B
<p>Picked: {{ picked }}</p>
</div>
</template>
<script>
export default {
setup() {
const picked = ref('A');
return {
picked
};
}
};
</script>
在这个例子中，picked 会是 'A' 或 'B'，具体取决于选中的单选按钮。
1.4. 下拉选择框（Select）
对于 <select> 元素，v-model 会绑定到选中的 <option> 的值。
<template>
<div>
<select v-model="selected">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
<p>You selected: {{ selected }}</p>
</div>
</template>
<script>
export default {
setup() {
const selected = ref('apple');
return {
selected
};
}
};
</script>
在这里，selected 的值会根据用户选择的 <option> 更新。
2. 表单提交
在 Vue 3 中，你可以使用 @submit.prevent 来防止表单的默认提交行为，并通过事件处理来提交表单。
2.1. 提交表单
<template>
<div>
<form @submit.prevent="handleSubmit">
<input v-model="username" placeholder="Enter your name" />
<button type="submit">Submit</button>
</form>
<p>You submitted: {{ username }}</p>
</div>
</template>
<script>
export default {
setup() {
const username = ref('');
const handleSubmit = () => {
console.log('Form submitted:', username.value);
};
return {
username,
handleSubmit
};
}
};
</script>
在这个例子中，表单的提交操作被阻止，handleSubmit 方法会被触发，而 username 会被提交并显示。
3. 表单验证
Vue 本身不提供直接的表单验证功能，但你可以使用自定义的方法来验证表单数据的有效性。常见的做法是，在提交表单时执行验证逻辑。
3.1. 基本表单验证
<template>
<div>
<form @submit.prevent="handleSubmit">
<input v-model="email" type="email" placeholder="Enter your email" />
<p v-if="email && !isValidEmail">Please enter a valid email.</p>
<button type="submit" :disabled="!isValidEmail">Submit</button>
</form>
</div>
</template>
<script>
export default {
setup() {
const email = ref('');
const isValidEmail = computed(() => /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test(email.value));
const handleSubmit = () => {
if (isValidEmail.value) {
console.log('Form submitted with email:', email.value);
} else {
console.log('Invalid email address');
}
};
return {
email,
isValidEmail,
handleSubmit
};
}
};
</script>
在上面的例子中，isValidEmail 是一个计算属性，用来验证输入的电子邮件地址是否有效。在表单提交时，会先检查验证是否通过。
4. 自定义表单控件
有时你可能会需要创建自定义表单控件，如自定义的选择框、开关等。你可以通过 v-model 自定义控件的绑定。
4.1. 自定义组件和 v-model
<template>
<div>
<CustomInput v-model="inputValue" />
<p>Input Value: {{ inputValue }}</p>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import CustomInput from './CustomInput.vue';
export default {
components: {
CustomInput
},
setup() {
const inputValue = ref('');
return {
inputValue
};
}
};
</script>
4.2. 自定义控件实现
<!-- CustomInput.vue -->
<template>
<div>
<input :value="modelValue" @input="updateValue" />
</div>
</template>
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
methods: {
updateValue(event) {
this.$emit('update:modelValue', event.target.value);
}
}
};
</script>
在自定义的 CustomInput 组件中，我们使用了 v-model 双向绑定，modelValue 是父组件传递的值，update:modelValue 是触发的事件，用于更新父组件的数据。
5. 总结
- 表单输入绑定：使用
v-model实现表单控件（输入框、复选框、单选按钮、下拉选择框等）的双向绑定。 - 表单提交：使用
@submit.prevent处理表单提交，并通过事件处理函数执行提交逻辑。 - 表单验证：你可以使用计算属性或自定义方法进行表单数据验证，并根据验证结果控制表单提交。
- 自定义表单控件：通过
v-model和自定义事件，Vue 允许你创建和管理自定义的表单控件。
Vue 3 提供了一个简单而强大的 API 来处理表单输入、提交和验证，使得表单开发变得更加高效和灵活。
发表回复