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

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

news 2026/4/2 1:11:29

目录

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

实验目的

（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

终极指南：30分钟打造你的首个ESP32 AI智能硬件项目

终极指南&#xff1a;30分钟打造你的首个ESP32 AI智能硬件项目 【免费下载链接】xiaozhi-esp32 An MCP-based chatbot | 一个基于MCP的聊天机器人 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaozhi-esp32 还在为嵌入式AI开发的高门槛而烦恼吗&#xff1f;物联…...

编程新知 2026/4/2 0:35:07

精益生产线功能拆解：如何利用精益生产线解决多品种小批量生产难题

在当前的制造业环境中&#xff0c;订单碎片化已成为常态&#xff0c;精益生产线不再是一个可选的优化项&#xff0c;而是企业生存的必修课。面对多品种、小批量的市场需求&#xff0c;传统的大批量流水线往往显得笨重不堪&#xff0c;频繁换型导致的停机、在制品积压造成的资金…...

编程新知 2026/4/2 0:33:07

基于离散化方法的三维土豆运动微波加热案例：参数化扫描与继承解算子实现离散化

基于离散化方法三维土豆运动微波加热的案例——第一种方法参数化扫描和继承解的算子实现离散化 离散化方式是最常见的实现运动仿真的方法之一&#xff0c;实现离散化的方法有很多&#xff0c;对于COMSOL主要的离散化及种 目前我研究了三种实现离散化的方法&#xff0c;这三种方…...

编程新知 2026/4/2 0:24:55

永磁同步电机矢量控制仿真避坑指南：从PI参数整定到SVPWM模块优化

永磁同步电机矢量控制仿真避坑指南&#xff1a;从PI参数整定到SVPWM模块优化 在工业自动化和电力驱动领域&#xff0c;永磁同步电机&#xff08;PMSM&#xff09;凭借其高效率、高功率密度和优异的动态性能&#xff0c;已成为众多应用场景的首选。然而&#xff0c;要实现PMSM的…...

编程新知 2026/4/2 0:06:45

Kandinsky-5.0-I2V-Lite-5s保姆级教程：从访问https://gpu-1pm4kagkou-7860.web.gpu.csdn.net/开始

Kandinsky-5.0-I2V-Lite-5s保姆级教程&#xff1a;从访问https://gpu-1pm4kagkou-7860.web.gpu.csdn.net/开始 1. 认识Kandinsky-5.0-I2V-Lite-5s Kandinsky-5.0-I2V-Lite-5s是一款轻量级的图生视频模型&#xff0c;它能将静态图片转化为动态视频。你只需要上传一张图片&…...

编程新知 2026/4/1 23:38:26

L1-064 估值一亿的ai核心代码 (分数20）字符串处理

•无论用户说什么&#xff0c;首先把对方说的话在一行中原样打印出来&#xff1b;•消除原文中多余空格&#xff1a;把相邻单词间的多个空格换成 1 个空格&#xff0c;把行首尾的空格全部删掉&#xff0c;把标点符号前面的空格删掉&#xff1b; •把原文中所有大写英文字母变成…...

编程新知 2026/4/1 23:03:46

Monaco-Editor插件使用小坑

无法通过鼠标进行选中文本<div id"monacoEditor" class"monacoEditor"></div>外层添加了splinter拖拽组件&#xff0c;导致mousemove事件被拦截&#xff0c;给monaco-editor添加css&#xff1a;pointer-events&#xff1a;auto.monacoEditor .…...

编程新知 2026/4/1 23:01:46

经典35kW V型磁钢永磁同步电机设计：基于Maxwell的成熟方案解析

基于Maxwell设计的 经典35kW&#xff0c;外径290 轴向长度88 3000RPM&#xff0c;111.5Nm, 6极36槽永磁同步电机&#xff08;PMSM&#xff09;设计案例(V型磁钢)&#xff0c;该案例已制作样机&#xff0c;方案成熟&#xff0c;运行稳定&#xff0c;可直接用于生产&#xff0c…...

编程新知 2026/4/1 19:45:15

实战分享：如何用本地替换和插桩调试搞定Kasada最新版x-kpsdk-cd环境检测

逆向工程实战&#xff1a;Kasada最新版x-kpsdk-cd环境检测的深度调试策略 在当今Web安全防护体系中&#xff0c;Kasada作为新一代反自动化攻击解决方案&#xff0c;其x-kpsdk-cd机制通过动态加密和运行时环境检测构建了强大的防御层。面对从280位扩展到294位的加密数组和Proxy保…...

编程新知 2026/4/1 19:39:13

从毕设到实战：手把手教你用PyTorch复现麦克风阵列声源定位（附完整代码与SLoClas数据集）

从零构建声源定位系统&#xff1a;PyTorch实战指南与SLoClas数据集深度解析 1. 声源定位技术概述与应用场景 声源定位技术在现代音频处理领域扮演着关键角色&#xff0c;它通过分析声音信号的空间特性来确定声源的位置信息。这项技术在智能家居、视频会议系统、安防监控、机器人…...

编程新知 2026/4/1 19:35:11