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

前端应用开发实验：表单控件绑定

news 2026/2/8 17:59:16

目录

  • 实验目的
  • 相关知识点
  • 实验内容
    • 代码实现
    • 效果

实验目的

（1）熟练掌握应用v-model指令实现双向数据绑定的方法，学会使用
v-model指令绑定文本框、复选框、单选按钮、下拉菜单；
（2）学会值绑定（将表单控件的值绑定到动态属性）和v-model 的修饰符

相关知识点

在 Vue.js 中，可以通过 v-model 指令对表单元素进行双向数据绑定。在
修改表单元素值的同时， Vue实例中对应的属性值也会随之更新；反之亦然。
（1）应用v-model指令绑定文本框、复选框、单选按钮、下拉菜单
应用v-model指令可以将单行文本框或多行文本框（文本域）的值与Vue实
例中的属性值进行双向数据绑定; 可以绑定单个复选框（绑定的是一个布尔值）
或多个复选框（绑定的是一个数组）;也可以绑定单选按钮，当某个单选按钮被
选中时，v-model指令绑定的属性值会被赋值为该单选按钮的value值；还可以
应用v-model指令绑定下拉菜单，对于单选情形，当选择某个选项时，v-model
指令绑定的属性值会被赋值为该选项的value值（如果未设置value值，则被赋
值为该选项中的文本），对于多选情形，应用v-model指令绑定的则是一个数组。
（2）使用v-bind指令实现表单控件的值绑定
在通常情况下，对于单选按钮、复选按钮、下拉菜单中的选项， v-model 指
令绑定的值是静态字符串（对于单个复选框，绑定的是布尔值）。但是，有时需
要将值绑定到 Vue 实例的一个动态属性上，而不是绑定到静态字符串，这时就
可以使用v-bind 指令来实现。
（3）v-model指令的修饰符
Vue.js 为 v-model 指令提供了一些修饰符,例如.lazy，.number，.trim，
可以用于处理某些常规操作。

实验内容

使用v-model指令实现表单控件的数据绑定，完成用户注册信息的填写和显示功能。要求：设计如图1所示的用户注册表单，使用v-model指令实现表单控件与Vue实例的相应属性的双向数据绑定，当用户填写信息（或选择）完毕并点击提交按钮，程序将用户填写的信息或选择的结果输出至控制台，或弹窗显示。
在这里插入图片描述

图1
参考基础代码如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
请在此基础上，利用v-model指令及其他相关指令或Vue知识完成代码编写和调试。

代码实现

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>用户注册表单</title>
</head>
<body>
<div id="app"><form @submit.prevent="submitForm"><p>用户名：<input type="text" v-model="user.name"></p><p>密码：<input type="password" v-model="user.password"></p><p>性别：<label><input type="radio" value="男" v-model="user.gender"> 男</label><label><input type="radio" value="女" v-model="user.gender"> 女</label></p><p>爱好：<label><input type="checkbox" value="html" v-model="user.hobbies"> html</label><label><input type="checkbox" value="CSS" v-model="user.hobbies"> CSS</label><label><input type="checkbox" value="Vue" v-model="user.hobbies"> Vue</label></p><p>所在地：<select v-model="user.country"><option value="中国">中国</option><option value="美国">美国</option><option value="其他">其他</option></select></p><p>选择你擅长的技术：<select v-model="user.jishu" multiple><option value="Java">Java</option><option value="前端vue">前端vue</option><option value="PHP">PHP</option></select><h3>您选择的技术：</h3><ul><li v-for="jishu in user.jishu">{{ jishu }}</li></ul></p><p>可选职位：<select v-model="selectedJob"><option v-for="job in jobs" :value="job">{{ job }}</option></select><button type="button" @click="addJob">添加到已选职位</button></p><p>已选职位：<select v-model="selectedJob" size="5" style="width: 200px;"><option v-for="job in addedJobs" :value="job">{{ job }}</option></select><button type="button" @click="removeJob">移除已选职位</button></p><p><button type="submit">提交</button></p></form>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
new Vue({el: '#app',data: {user: {name: '',password: '',gender: '',hobbies: [],country: '',jishu: [],},jobs: ['Java程序员', '软件测试师', '前端工程师'],addedJobs: [],selectedJob: '',},methods: {addJob() {if (this.selectedJob && !this.addedJobs.includes(this.selectedJob)) {this.addedJobs.push(this.selectedJob);}},removeJob() {if (this.selectedJob) {const index = this.addedJobs.indexOf(this.selectedJob);if (index !== -1) {this.addedJobs.splice(index, 1);}}},submitForm() {console.log('提交的用户信息：', this.user);console.log('提交的职位：', this.addedJobs);alert('提交成功！');},},
});
</script>
</body>
</html>

这里不完全是实例代码，经过了很大程度的修改

效果

在这里插入图片描述
在这里插入图片描述

相关文章：

前端应用开发实验：表单控件绑定

目录 实验目的相关知识点实验内容代码实现效果 实验目的 &#xff08;1&#xff09;熟练掌握应用v-model指令实现双向数据绑定的方法&#xff0c;学会使用 v-model指令绑定文本框、复选框、单选按钮、下拉菜单&#xff1b; &#xff08;2&#xff09;学会值绑定&#xff08;将…...

编程日记 2024/5/30 3:33:01

[双指针] --- 快乐数 盛最多水的容器

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 算法Journey 本篇博客我们分享一下双指针算法中的快慢指针以及对撞双指针&#xff0c;下面我们开始今天的学习吧~ &#x1f3e0; 快乐数 &#x1f4d2; 题…...

编程日记 2024/5/30 3:32:00

操作系统 - 输入/输出(I/O)管理

输入/输出(I/O)管理 考纲内容 I/O管理基础 设备&#xff1a;设备的基本概念&#xff0c;设备的分类&#xff0c;I/O接口 I/O控制方式&#xff1a;轮询方式&#xff0c;中断方式&#xff0c;DMA方式 I/O软件层次结构&#xff1a;中断处理程序&#xff0c;驱动程序&#xff0c;…...

编程日记 2024/5/30 3:30:59

代码随想录算法训练营第22天（py）| 二叉树 | 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

669. 修剪二叉搜索树 力扣链接 给定一个二叉搜索树&#xff0c;同时给定最小边界L 和最大边界 R。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[L, R]中 (R>L) 思路 如果当前节点元素小于low&#xff0c;递归右子树&#xff0c;返回符合条件的头节点 如果当前节点元…...

编程日记 2024/5/30 3:29:58

使用C语言实现学生信息管理系统

前言 在我们实现学生信息管理系统的过程中&#xff0c;我们几乎会使用到C语言最常用最重要的知识&#xff0c;对于刚学习完C语言的同学来说是一次很好的巩固机会&#xff0c;其中还牵扯到数据结果中链表的插入和删除内容。 实现学生信息管理系统 文件的创建与使用 对于要实现…...

编程日记 2024/5/30 3:27:56

上下文视觉提示实现zero-shot分割检测及多visual-prompt改造

文章目录 一、Closed-Set VS Open-set二、DINOv2.1 论文和代码2.2 内容2.3 安装部署2.4 使用效果 三、多visual prompt 改造3.1 获取示例图mask3.2 修改函数参数3.3 推理代码3.4 效果的提升&#xff01; 四、总结 本文主要介绍visual prompt模型DINOv&#xff0c;该模型可输入八…...

编程日记 2024/5/30 3:26:55

WebGL学习（一）渲染关系

学习webgl 开发理解渲染关系是必须的&#xff0c;也非常重要&#xff0c;很多人忽视了这个过程。 我这里先简单写一下&#xff0c;后面尽量用通俗易懂的方式&#xff0c;举例讲解。 WebGL&#xff0c;全称Web Graphics Library&#xff0c;是一种在网页上渲染3D图形的技术。它…...

编程日记 2024/5/30 3:25:53

人生建议：向猫学习

心安理得地被爱 猫从不担心自己不配得到爱&#xff0c;也正是这幅理所应当、宠辱不惊的样子&#xff0c;让人欲罢不能。或许 当你相信自己值得世界上最好的爱时&#xff0c;你就会拥有。 多晒太阳多睡觉 猫喜欢睡觉&#xff0c;尤其喜欢躺阳光好的地方。阳光和睡眠&#xff0c…...

编程日记 2024/5/30 3:24:52

软件架构设计属性之三：结构性属性浅析

文章目录 引言一、结构性属性的定义二、结构性属性的关键要素1. 组件化2. 模块化3. 层次化4. 接口定义5. 数据流6. 依赖管理 三、结构性属性的设计原则1. 高内聚低耦合2. 松耦合3. 清晰的接口4. 可维护性5. 可扩展性 四、结构性属性的实现策略1. 组件划分2. 模块化设计3. 接口设…...

编程日记 2024/5/30 3:21:50

JAVA：多线程常见的面试题和答案

请关注微信公众号&#xff1a;拾荒的小海螺 博客地址&#xff1a;http://lsk-ww.cn/ 1、并发编程三要素&#xff1f; 原 子 性 原子性指的是一个或者多个操作&#xff0c;要么全部执行并且在执行的过程中不被其他操作打断&#xff0c;要么就全部都不执行。可 见 性 可见性指多…...

编程日记 2024/5/30 3:20:49

短信平台-平台群发短信

时代的进步带来了我们生活的便利&#xff0c;而其中最受欢迎和广泛应用的方式之一就是通过短信传递信息。在这个飞速发展的数字时代&#xff0c;我们需要一个高效、可靠的短信平台来满足不断增长的通讯需求。而今天&#xff0c;我要向大家推荐的正是这样一款卓越的短信平台——…...

编程日记 2024/5/30 3:19:47

C++：类和对象

一、前言 C是面向对象的语言&#xff0c;本文将通过上、中、下三大部分&#xff0c;带你深入了解类与对象。 目录 一、前言 二、部分&#xff1a;上 1.面向过程和面向对象初步认识 2.类的引入 3.类的定义 4.类的访问限定符及封装 5.类的作用域 6.类的实例化 7.类的…...

编程日记 2024/5/30 3:18:46

JavaScript条件语句与逻辑判断：解锁代码逻辑的奥秘【含代码示例】

JavaScript条件语句与逻辑判断&#xff1a;解锁代码逻辑的奥秘【含代码示例】 基本概念与作用if...else&#xff1a;决策的基础switch&#xff1a;多路分支的能手逻辑运算符&#xff1a;连接逻辑的纽带三元运算符&#xff1a;简洁的力量 功能使用思路与技巧短路求值优化防止swi…...

编程日记 2024/5/30 3:16:44

sparksql自定义函数

前言 Spark SQL UDF（也称为用户定义函数）是Spark SQL&DataFrame最有用的功能，它扩展了Spark内置功能。在本文中，我将解释什么是UDF？为什么我们需要它，以及如何使用Java、Scala示例在DataFrame和SQL上创建和使用它。 注意：UDF是最昂贵的操作，因此只有在必要时才使用…...

编程日记 2024/5/30 3:14:42

新人开发新系统，旧人维护旧系统

通常来说旧系统存在一些难以解决的问题&#xff0c;软件架构及逻辑实现可能会有一定的缺陷和复杂度&#xff0c;甚至有些烂系统可以称为”焦油坑“&#xff0c;意思是出现问题难以分析解决&#xff0c;谁来谁陷进去。因此&#xff0c;如果同时存在新系统&#xff08;可能正在开…...

编程日记 2024/5/30 3:13:41

鸿蒙应用模型：【Stage模型开发】概述

Stage模型开发概述 基本概念 下图展示了Stage模型中的基本概念。 图1 Stage模型概念图 [AbilityStage] 每个Entry类型或者Feature类型的HAP在运行期都有一个AbilityStage类实例&#xff0c;当HAP中的代码首次被加载到进程中的时候&#xff0c;系统会先创建AbilityStage实例…...

编程日记 2024/5/30 3:12:40

java使用jdbcTemplatep批量插入数据

JdbcTemplate 是 Spring 框架中提供的一个简化 JDBC 操作的工具类&#xff0c;它封装了 JDBC 的核心功能&#xff0c;使得开发者能够更方便、简洁地进行数据库操作。 下面是一个使用 JdbcTemplate 进行批量插入的示例&#xff1a; import org.springframework.jdbc.core.Batch…...

编程日记 2024/5/30 3:11:39

K8s service 进阶

文章目录 K8s service 进阶Service 工作逻辑Service 具体实现Service 资源类型ClusterIPNodePortLoadBalancerExternalName Service 与 EndpointEndpoint 与 容器探针自定义Endpoint Service 相关字段sessionAffinityexternalTrafficPolicyinternalTrafficPolicypublishNotRead…...

编程日记 2024/5/30 3:10:38

CompletableFuture详细讲解

目录 一、基本概念 1.1 异步编程 1.2 CompletableFuture简介 二、创建和完成CompletableFuture 2.1 创建CompletableFuture对象 2.2 手动完成CompletableFuture 2.3 异常完成CompletableFuture 三、异步计算和回调 3.1 异步任务的执行 3.2 处理计算结果 四、组合多个…...

编程日记 2024/5/30 3:09:37

【Linux】初识Linux和Linux环境配置

1.什么是Linux操作系统 说到电脑系统 我想有大多数人会脱口而出&#xff1a;windows、mac 是的&#xff0c;这也是如今市场上主流的两种操作系统。 但是对于IT相关的人士来说&#xff0c;还有一种系统也是必须有姓名 那就是Linux Linux&#xff0c;Linux Is Not UniX 的…...

编程日记 2024/5/30 3:07:35

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2026/1/23 12:22:14

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2026/1/26 17:26:03

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

编程新知 2026/2/7 23:29:43

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

编程新知 2026/2/7 4:19:21

怎么开发一个网络协议模块（C语言框架）之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...

编程新知 2025/8/28 4:17:05

深入解析光敏传感技术：嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件&#xff0c;其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时&#xff0c;价带电子受激发跃迁至导带&#xff0c;形成电子-空穴对&#xff0c;导致材料电导率显著提升。…...

编程新知 2026/1/27 1:43:25