当前位置：首页 > news >正文

Vue3 学习教程，从入门到精通，Vue 3 表单控件绑定详解与案例（7）

news 2025/7/15 11:03:40

Vue 3 表单控件绑定详解与案例

在 Vue 3 中，表单控件的绑定是处理用户输入和交互的核心部分。本文将详细介绍如何在 Vue 3 中绑定各种表单控件，包括文本框、复选框、单选按钮和下拉菜单，并结合修饰符和 AIGC 辅助编程的案例，帮助您全面掌握 Vue 3 表单处理。

一、绑定文本框

1. 单行文本框

语法：

使用 v-model 指令进行双向数据绑定。

案例代码：

<!-- SingleLineText.vue -->
<template><div><label for="username">用户名:</label><input id="username" v-model="username" type="text" /><p>输入的用户名: {{ username }}</p></div>
</template><script setup>
import { ref } from 'vue';const username = ref('');
</script><style scoped>
label {margin-right: 10px;
}
</style>

详细注释：

v-model="username"：将输入框的值与 username 状态进行双向绑定。
ref：使用 ref 定义响应式状态。
显示输入值：通过 {{ username }} 显示当前输入值。

2. 多行文本框

语法：

同样使用 v-model 进行双向绑定。

案例代码：

<!-- MultiLineText.vue -->
<template><div><label for="bio">个人简介:</label><textarea id="bio" v-model="bio" rows="4" cols="50"></textarea><p>个人简介:</p><p>{{ bio }}</p></div>
</template><script setup>
import { ref } from 'vue';const bio = ref('');
</script><style scoped>
label {display: block;margin-bottom: 5px;
}
</style>

详细注释：

v-model="bio"：将多行文本框的值与 bio 状态进行双向绑定。
rows 和 cols：设置文本区域的行数和列数。
显示输入值：通过 {{ bio }} 显示当前输入内容。

二、绑定复选框

1. 单个复选框

语法：

使用 v-model 绑定到一个布尔值。

案例代码：

<!-- SingleCheckbox.vue -->
<template><div><label for="subscribe">订阅新闻:</label><input id="subscribe" v-model="subscribe" type="checkbox" /><p>订阅状态: {{ subscribe }}</p></div>
</template><script setup>
import { ref } from 'vue';const subscribe = ref(false);
</script><style scoped>
label {margin-right: 10px;
}
</style>

详细注释：

v-model="subscribe"：将复选框的状态与 subscribe 绑定，subscribe 为布尔值。
显示状态：通过 {{ subscribe }} 显示 true 或 false。

2. 多个复选框

语法：

绑定到一个数组，用于存储选中的值。

案例代码：

<!-- MultipleCheckboxes.vue -->
<template><div><label><input type="checkbox" value="Vue" v-model="frameworks" /> Vue</label><label><input type="checkbox" value="React" v-model="frameworks" /> React</label><label><input type="checkbox" value="Angular" v-model="frameworks" /> Angular</label><p>选中的框架: {{ frameworks }}</p></div>
</template><script setup>
import { ref } from 'vue';const frameworks = ref([]);
</script><style scoped>
label {margin-right: 10px;
}
</style>

详细注释：

v-model="frameworks"：将选中的值添加到 frameworks 数组中。
value：指定每个复选框对应的值。
显示选中值：通过 {{ frameworks }} 显示选中的框架列表。

三、绑定单选按钮

语法：

绑定到一个单一的值，用于选择其中一个选项。

案例代码：

<!-- RadioButtons.vue -->
<template><div><label><input type="radio" value="male" v-model="gender" /> 男</label><label><input type="radio" value="female" v-model="gender" /> 女</label><label><input type="radio" value="other" v-model="gender" /> 其他</label><p>性别: {{ gender }}</p></div>
</template><script setup>
import { ref } from 'vue';const gender = ref('');
</script><style scoped>
label {margin-right: 10px;
}
</style>

详细注释：

v-model="gender"：将选中的单选按钮的值绑定到 gender。
value：每个单选按钮的对应值。
显示选中值：通过 {{ gender }} 显示选中的性别。

四、绑定下拉菜单

1. 单选下拉菜单

语法：

使用 v-model 绑定到一个单一的值。

案例代码：

<!-- SingleSelect.vue -->
<template><div><label for="country">选择国家:</label><select id="country" v-model="country"><option disabled value="">请选择</option><option>中国</option><option>美国</option><option>英国</option></select><p>选中的国家: {{ country }}</p></div>
</template><script setup>
import { ref } from 'vue';const country = ref('');
</script><style scoped>
label {margin-right: 10px;
}
select {margin-right: 10px;
}
</style>

详细注释：

v-model="country"：将选中的选项值绑定到 country。
默认选项：添加一个 disabled 的默认选项，提示用户选择。
显示选中值：通过 {{ country }} 显示选中的国家。

2. 多选下拉菜单

语法：

绑定到一个数组，用于存储选中的值。

案例代码：

<!-- MultipleSelect.vue -->
<template><div><label for="hobbies">选择爱好:</label><select id="hobbies" v-model="hobbies" multiple><option>阅读</option><option>旅行</option><option>运动</option><option>音乐</option></select><p>选中的爱好: {{ hobbies }}</p></div>
</template><script setup>
import { ref } from 'vue';const hobbies = ref([]);
</script><style scoped>
label {margin-right: 10px;
}
select {width: 200px;height: 150px;
}
</style>

详细注释：

v-model="hobbies"：将选中的选项值添加到 hobbies 数组中。
multiple：允许多选。
显示选中值：通过 {{ hobbies }} 显示选中的爱好列表。

五、值绑定

1. 单选按钮的值绑定

语法：

使用 v-model 绑定到一个对象属性。

案例代码：

<!-- ValueBindingRadio.vue -->
<template><div><label><input type="radio" v-model="person.gender" value="male" /> 男</label><label><input type="radio" v-model="person.gender" value="female" /> 女</label><p>性别: {{ person.gender }}</p></div>
</template><script setup>
import { reactive } from 'vue';const person = reactive({gender: '',
});
</script><style scoped>
label {margin-right: 10px;
}
</style>

详细注释：

v-model="person.gender"：将选中的单选按钮的值绑定到 person.gender。
reactive：使用 reactive 定义响应式对象。

2. 复选框的值绑定

语法：

绑定到一个数组或对象属性。

案例代码：

<!-- ValueBindingCheckbox.vue -->
<template><div><label><input type="checkbox" v-model="person.interests" value="reading" /> 阅读</label><label><input type="checkbox" v-model="person.interests" value="traveling" /> 旅行</label><label><input type="checkbox" v-model="person.interests" value="sports" /> 运动</label><p>兴趣: {{ person.interests }}</p></div>
</template><script setup>
import { reactive } from 'vue';const person = reactive({interests: [],
});
</script><style scoped>
label {display: block;margin-bottom: 5px;
}
</style>

详细注释：

v-model="person.interests"：将选中的复选框的值添加到 person.interests 数组中。
reactive：使用 reactive 定义响应式对象。

3. 下拉菜单的值绑定

语法：

绑定到一个对象属性或数组。

案例代码：

<!-- ValueBindingSelect.vue -->
<template><div><label for="color">选择颜色:</label><select id="color" v-model="color"><option disabled value="">请选择</option><option value="red">红色</option><option value="green">绿色</option><option value="blue">蓝色</option></select><p>选中的颜色: {{ color }}</p></div>
</template><script setup>
import { ref } from 'vue';const color = ref('');
</script><style scoped>
label {margin-right: 10px;
}
select {margin-right: 10px;
}
</style>

详细注释：

v-model="color"：将选中的下拉选项值绑定到 color。
显示选中值：通过 {{ color }} 显示选中的颜色。

六、使用修饰符

1. `.lazy`

说明： .lazy 修饰符使 v-model 在 change 事件触发时同步数据，而不是 input 事件。

案例代码：

<!-- LazyModifier.vue -->
<template><div><label for="username">用户名:</label><input id="username" v-model.lazy="username" type="text" /><p>输入的用户名: {{ username }}</p></div>
</template><script setup>
import { ref } from 'vue';const username = ref('');
</script><style scoped>
label {margin-right: 10px;
}
</style>

详细注释：

.lazy：当输入框失去焦点或按下回车键时，username 状态才会更新。

2. `.number`

说明： .number 修饰符将输入的字符串转换为数字。

案例代码：

<!-- NumberModifier.vue -->
<template><div><label for="age">年龄:</label><input id="age" v-model.number="age" type="number" /><p>年龄: {{ age }}</p></div>
</template><script setup>
import { ref } from 'vue';const age = ref(0);
</script><style scoped>
label {margin-right: 10px;
}
</style>

详细注释：

.number：确保 age 状态为数字类型，而不是字符串。

3. `.trim`

说明： .trim 修饰符去除输入值两端的空白字符。

案例代码：

<!-- TrimModifier.vue -->
<template><div><label for="email">邮箱:</label><input id="email" v-model.trim="email" type="email" /><p>邮箱: {{ email }}</p></div>
</template><script setup>
import { ref } from 'vue';const email = ref('');
</script><style scoped>
label {margin-right: 10px;
}
</style>

详细注释：

.trim：自动去除输入值两端的空白字符，确保邮箱格式正确。

七、AIGC 辅助编程——绑定输入框的值和下拉菜单

1. 绑定输入框的值

目标： 使用 AIGC 辅助编程，创建一个输入框并绑定其值。

案例代码：

<!-- AIGCInputBinding.vue -->
<template><div><label for="aiInput">AIGC 输入:</label><input id="aiInput" v-model="aiInput" type="text" /><p>输入的内容: {{ aiInput }}</p></div>
</template><script setup>
import { ref } from 'vue';// 使用 AIGC 生成的代码
const aiInput = ref('');
</script><style scoped>
label {margin-right: 10px;
}
</style>

详细注释：

AIGC 生成的代码：假设 AIGC 生成的代码包含 aiInput 状态和输入框绑定。
v-model="aiInput"：绑定输入框的值到 aiInput 状态。

2. 绑定下拉菜单

目标： 使用 AIGC 辅助编程，创建一个下拉菜单并绑定其值。

案例代码：

<!-- AIGCSelectBinding.vue -->
<template><div><label for="aiSelect">AIGC 选择:</label><select id="aiSelect" v-model="aiSelect"><option disabled value="">请选择</option><option>选项1</option><option>选项2</option><option>选项3</option></select><p>选中的选项: {{ aiSelect }}</p></div>
</template><script setup>
import { ref } from 'vue';// 使用 AIGC 生成的代码
const aiSelect = ref('');
</script><style scoped>
label {margin-right: 10px;
}
select {margin-right: 10px;
}
</style>

详细注释：

AIGC 生成的代码：假设 AIGC 生成的代码包含 aiSelect 状态和下拉菜单绑定。
v-model="aiSelect"：绑定下拉菜单的选中值到 aiSelect 状态。

八、综合性案例

1. 综合表单绑定示例

目标： 结合文本框、复选框、单选按钮和下拉菜单，创建一个综合表单。

案例代码：

<!-- ComprehensiveForm.vue -->
<template><form @submit.prevent="handleSubmit"><div><label for="name">姓名:</label><input id="name" v-model="form.name" type="text" /></div><div><label for="email">邮箱:</label><input id="email" v-model.trim="form.email" type="email" /></div><div><label>性别:</label><label><input type="radio" v-model="form.gender" value="male" /> 男</label><label><input type="radio" v-model="form.gender" value="female" /> 女</label><label><input type="radio" v-model="form.gender" value="other" /> 其他</label></div><div><label for="country">国家:</label><select id="country" v-model="form.country"><option disabled value="">请选择</option><option>中国</option><option>美国</option><option>英国</option></select></div><div><label>兴趣:</label><label><input type="checkbox" v-model="form.interests" value="reading" /> 阅读</label><label><input type="checkbox" v-model="form.interests" value="traveling" /> 旅行</label><label><input type="checkbox" v-model="form.interests" value="sports" /> 运动</label></div><button type="submit">提交</button></form><p>表单数据:</p><pre>{{ form }}</pre>
</template><script setup>
import { reactive } from 'vue';const form = reactive({name: '',email: '',gender: '',country: '',interests: [],
});const handleSubmit = () => {console.log('提交的表单数据:', form);
};
</script><style scoped>
form {max-width: 500px;margin: 0 auto;
}
div {margin-bottom: 10px;
}
label {display: block;margin-bottom: 5px;
}
input,
select {width: 100%;padding: 8px;box-sizing: border-box;
}
button {padding: 10px 20px;
}
</style>

详细注释：

表单结构：包含文本框、邮箱输入框、单选按钮、下拉菜单和复选框。
v-model 绑定：所有表单控件均使用 v-model 进行双向绑定。
提交处理：点击提交按钮时，将表单数据输出到控制台。
样式：简单的样式使表单更美观。

2. 表单验证与提交

目标： 在综合表单基础上，添加表单验证和提交功能。

案例代码：

<!-- ValidatedForm.vue -->
<template><form @submit.prevent="handleSubmit"><div><label for="name">姓名:</label><input id="name" v-model="form.name" type="text" /><span v-if="errors.name" class="error">{{ errors.name }}</span></div><div><label for="email">邮箱:</label><input id="email" v-model.trim="form.email" type="email" /><span v-if="errors.email" class="error">{{ errors.email }}</span></div><div><label>性别:</label><label><input type="radio" v-model="form.gender" value="male" /> 男</label><label><input type="radio" v-model="form.gender" value="female" /> 女</label><label><input type="radio" v-model="form.gender" value="other" /> 其他</label></div><div><label for="country">国家:</label><select id="country" v-model="form.country"><option disabled value="">请选择</option><option>中国</option><option>美国</option><option>英国</option></select><span v-if="errors.country" class="error">{{ errors.country }}</span></div><div><label>兴趣:</label><label><input type="checkbox" v-model="form.interests" value="reading" /> 阅读</label><label><input type="checkbox" v-model="form.interests" value="traveling" /> 旅行</label><label><input type="checkbox" v-model="form.interests" value="sports" /> 运动</label></div><button type="submit">提交</button></form><p>表单数据:</p><pre>{{ form }}</pre>
</template><script setup>
import { reactive, reactiveProp } from 'vue';const form = reactive({name: '',email: '',gender: '',country: '',interests: [],
});const errors = reactive({name: '',email: '',country: '',
});const handleSubmit = () => {// 重置错误errors.name = '';errors.email = '';errors.country = '';if (form.name === '') {errors.name = '姓名不能为空';}if (form.email === '') {errors.email = '邮箱不能为空';} else if (!/^\S+@\S+\.\S+$/.test(form.email)) {errors.email = '邮箱格式不正确';}if (form.country === '') {errors.country = '请选择国家';}if (!errors.name && !errors.email && !errors.country) {console.log('提交的表单数据:', form);}
};
</script><style scoped>
.error {color: red;font-size: 0.9em;
}
form {max-width: 500px;margin: 0 auto;
}
div {margin-bottom: 10px;
}
label {display: block;margin-bottom: 5px;
}
input,
select {width: 100%;padding: 8px;box-sizing: border-box;
}
button {padding: 10px 20px;
}
</style>

详细注释：