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

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

news 文章来源：https://blog.csdn.net/m0_72471315/article/details/139304305 2025/5/17 20:08:47

目录

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

实验目的

（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

redis-cli help使用

1. redis-cli命令使用—先连接上服务器 连接到 Redis 服务器&#xff1a; 使用 redis-cli 命令即可连接到本地运行的 Redis 服务器&#xff0c;默认连接到本地的 6379 端口。 redis-cli如果 Redis 服务器不在本地或者端口不同&#xff0c;可以使用 -h 和 -p 参数指定主机和端…...

编程日记 2024/5/30 3:05:34

中华活页文选高中版投稿发表

《中华活页文选&#xff08;高中版&#xff09;》创刊于1960年&#xff0c;是中宣部所属中国出版传媒股份有限公司主管、中华书局主办的国家级基础教育期刊&#xff0c;曾获得“中国期刊方阵双效期刊”、国家新闻出版广电总局推荐的“百种优秀报刊”等荣誉称号。本刊以高中学科…...

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

[图解]企业应用架构模式2024新译本讲解02-表数据入口

1 00:00:00,420 --> 00:00:04,330 这个案例&#xff0c;我们就是用书上的案例了 2 00:00:06,080 --> 00:00:08,860 收入确认的一个案例 3 00:00:09,510 --> 00:00:11,100 书上讲了&#xff0c;收入确认 4 00:00:13,330 --> 00:00:15,270 就是说&#xff0c;你给…...

编程日记 2024/5/30 3:02:31

SSE(Server Sent Event) 踩坑留念

整条链路是 客户端A --> 服务端 A —> 服务端 B 我负责服务端 A 此时要注意 Client 中的 processes 的写法 Post(value “/v2/xx”, processes MediaType.TEXT_EVENT_STREAM) 这样写是一直报错的 改成下面的写法才可以 Post(value “/v2/xx”, processes MediaT…...

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

plt.xticks()的作用

参考&#xff1a; https://blog.csdn.net/weixin_41796265/article/details/131442400 plt.xticks() 是 Matplotlib 库中的一个函数&#xff0c;用于设置坐标轴刻度的位置和标签。 它的作用包括&#xff1a; 设置 x 轴刻度的位置&#xff1a;可以通过传递一个数组或列表来设…...

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

开发者的福音：免去搭建服务，让你的应用开发变得像吃蛋糕一样简单!

传统应用开发的"噩梦" 想象一下&#xff0c;你正在准备一场盛大的晚宴&#xff0c;但必须从零开始建造厨房、种植食材、甚至学习烹饪技巧。这就是传统应用开发的现状——你不仅要设计数据库、编写API接口&#xff0c;还要处理对象存储、实时数据库、云数据库等一系列…...

编程日记 2024/5/30 2:59:27

AVL树的模拟实现

我们上期提到了二叉搜索树&#xff0c;只是简单的讲了一下原理&#xff0c;那么今天我们就讲一下AVL树。 目录 AVL树的概念AVL树的实现AVL树的架构insert插入引用pair对象引进parent指针仅插入数据调节平衡因子情况1&#xff1a;插入在父亲的右边&#xff0c;父亲的平衡因子后…...

编程日记 2024/5/30 2:56:24

php 一个数组中的元素是否在一个字符串中包含

php 一个数组中的元素是否在一个字符串中包含 要检查一个数组中的元素是否在一个字符串中出现&#xff0c;你可以使用strpos()函数。这个函数返回子字符串首次出现的位置索引&#xff0c;如果没有找到&#xff0c;它会返回false。 $array [apple, banana, cherry]; $string …...

编程日记 2024/5/30 2:55:23

conda修改环境名称后，无法安装包，显示no such file

1问题描述 原本创建环境时设置的名字不太合适&#xff0c;但是因为重新创建环境很麻烦&#xff0c;安装很多包。。所以想直接对包名进行修改&#xff0c;本人采用的方式是直接找到conda环境的文件目录&#xff0c;然后修改文件名&#xff0c;简单粗暴。确实修改成功了&#xf…...

编程日记 2024/5/30 2:53:21

linux安装mysql【linux】

linux安装mysql【linux】 前言版权推荐CentOS7.9安装mysql8.0【linux】yum安装rpm安装 最后 前言 2024-5-13 15:52:22 以下内容源自《【linux】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作者是CSDN日星月云 博客主页是https://jss…...

编程日记 2024/5/30 2:52:20