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

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

news 2025/7/15 6:19:49

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>

详细注释：

  • 表单验证：在提交时进行简单的验证，检查姓名、邮箱和国家是否为空，以及邮箱格式是否正确。
  • 错误提示：通过 errors 对象存储错误信息，并在对应字段下方显示。
  • 提交处理：如果验证通过，打印表单数据到控制台。

九、总结

Vue 3 提供了强大的表单处理能力，通过 v-model 指令实现双向数据绑定，支持各种表单控件的绑定和修饰符的使用。本文详细介绍了 Vue 3 表单控件绑定的语法知识点、使用方法，并结合具体案例代码，帮助您全面掌握 Vue 3 表单处理。

通过掌握以下关键点，您可以有效地在 Vue 3 中处理表单：

  1. 文本框绑定：使用 v-model 绑定单行和多行文本框。
  2. 复选框绑定：单个和多个复选框的绑定。
  3. 单选按钮绑定：单个和多个单选按钮的绑定。
  4. 下拉菜单绑定：单选和多选下拉菜单的绑定。
  5. 值绑定：将表单控件的值绑定到对象属性或数组。
  6. 修饰符：使用 .lazy, .number, .trim 等修饰符优化数据处理。
  7. 表单验证：结合表单验证逻辑，提升用户体验。
http://www.dtcms.com/a/278618.html

相关文章：

  • 设计模式--适配器模式
  • PHP password_get_info() 函数
  • 第一章 uniapp实现兼容多端的树状族谱关系图，创建可缩放移动区域
  • 商城系统的架构与功能模块
  • flink 中配置hadoop 遇到问题解决
  • 用Python向PDF添加文本：精确插入文本到PDF文档
  • vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
  • Triton Inference Server 架构与前后处理方案梳理
  • 打破空间边界！Nas-Cab用模块化设计重构个人存储逻辑
  • JAVA进阶--JVM
  • 设备发出、接收数据帧的工作机制
  • 无人机迫降模式模块运行方式概述！
  • 掉线监测-tezos rpc不能用，改为残疾网页监测
  • .net winfrom 获取上传的Excel文件 单元格的背景色
  • 深入浅出Kafka Producer源码解析：架构设计与编码艺术
  • 创客匠人：创始人 IP 打造的破局点，藏在 “小而精” 的需求里
  • React源码3：update、fiber.updateQueue对象数据结构和updateContainer()中enqueueUpdate()阶段
  • 分布式系统中设计临时节点授权的自动化安全审计
  • postgreSQL的sql语句
  • 时序预测 | Pytorch实现CNN-LSTM-KAN电力负荷时间序列预测模型
  • 2025 春秋杯夏季个人挑战赛 Web
  • lesson13：Python的datetime模块
  • 登录校验与异常处理(web后端笔记第三期)
  • NAT原理与实验指南：网络地址转换技术解析与实践
  • 中国AI应用“三分天下”：国企成主力、中小企偏订阅、C端仍在观望
  • 使用axios向服务器请求信息并渲染页面
  • TCP心跳机制详解
  • 【Linux系统】进程切换 | 进程调度——O(1)调度队列
  • 如何在服务器上运行一个github项目
  • VMware 虚拟机 Ubuntu 无法主机与虚拟机之间复制粘贴的详细解决方案