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

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

news 2026/2/9 0:32:38

目录

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

实验目的

（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

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2026/2/1 21:17:19

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/12/16 3:15:21

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2026/1/30 6:20:08

客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

编程新知 2026/1/29 7:55:37

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践&#xff0c;很多人以为AI已经强大到不需要程序员了&#xff0c;其实不是&#xff0c;AI更加需要程序员&#xff0c;普通人…...

编程新知 2026/2/5 21:24:11

goreplay

1.github地址 https://github.com/buger/goreplay 2.简单介绍 GoReplay 是一个开源的网络监控工具&#xff0c;可以记录用户的实时流量并将其用于镜像、负载测试、监控和详细分析。 3.出现背景 随着应用程序的增长&#xff0c;测试它所需的工作量也会呈指数级增长。GoRepl…...

编程新知 2026/2/1 6:17:17

【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...

编程新知 2026/2/7 2:24:22

Oracle实用参考（13）——Oracle for Linux物理DG环境搭建（2）

13.2. Oracle for Linux物理DG环境搭建 Oracle 数据库的DataGuard技术方案，业界也称为DG，其在数据库高可用、容灾及负载分离等方面，都有着非常广泛的应用，对此，前面相关章节已做过较为详尽的讲解，此处不再赘述。 需要说明的是， DG方案又分为物理DG和逻辑DG，两者的搭建…...

编程新知 2025/11/27 17:33:50