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

目录

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

实验目的

(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>

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

效果

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/335471.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java枚举

引入&#xff1a; 当有一些类&#xff0c;希望它的成员的值是具体的有限的值&#xff0c;且只读不需要修改&#xff0c;不希望用户去自定义其他的值。 比如季节类&#xff0c;它的成员只能是春夏秋冬&#xff0c;不希望用户构造其他的值。 枚举enum&#xff1a; 枚举是一组的特…

SQL数据库多层嵌套 json转sql建表语句,SQL数据库里数组里对象数据怎么创建

1. uniapp sqlite 一个数组包含对象嵌套对象通过主外键方式插入数据库&#xff1a; // 假设有一个对象数组&#xff0c;对象中包含嵌套对象 const objectsArray [{parentObject: {id: 1,name: Parent 1,// 其他父对象属性},childObject: {id: 11,parentId: 1,name: Child 1 o…

字符串操作:写一个方法,实现字符串的反转,如:输入abc,输出cba

import java.util.Scanner; public class Test_A15 {public static void main(String[] args){String strA"";System.out.println("请输入一串字符串:");Scanner scannernew Scanner(System.in);strAscanner.next();Test_A15 T15new Test_A15();String re…

使用 LangFuse 意外被挂马!我是怎么恢复系统稳定的?

在使用 LangFuse 过程中,被意外挂马!通过一番折腾服务恢复正常~ 本文将详细介绍应对恶意脚本和进程的完整方案,包括识别、清理、恢复和预防步骤。 阿里云扫到的信息 被执行的 Base64 SUlaQnRTCmV4ZWMgJj4vZGV2L251bGwKSUhDa0hQbmQ9Li8uJChkYXRlfG1kNXN1bXxoZWFkIC1jMjApCl…

AI Agent智能体概述及原理

AI Agent概述 AI Agent旨在理解、分析和响应人类输入&#xff0c;像人类一样执行任务、做出决策并与环境互动。它们可以是遵循预定义规则的简单系统&#xff0c;也可以是根据经验学习和适应的复杂、自主的实体&#xff1b;可以是基于软件的实体&#xff0c;也可以是物理实体。…

行为型设计模式之模板模式

文章目录 概述原理结构图实现 小结 概述 模板方法模式(template method pattern)原始定义是&#xff1a;在操作中定义算法的框架&#xff0c;将一些步骤推迟到子类中。模板方法让子类在不改变算法结构的情况下重新定义算法的某些步骤。 模板方法中的算法可以理解为广义上的业…

【YOLOv5/v7改进系列】引入AKConv——即插即用的卷积块

一、导言 介绍了一种名为AKConv&#xff08;Alterable Kernel Convolution&#xff09;的新型卷积操作&#xff0c;旨在解决标准卷积操作存在的两个根本性问题。首先&#xff0c;标准卷积操作受限于局部窗口&#xff0c;无法捕获来自其他位置的信息&#xff0c;且其采样形状固…

Facebook隐私保护:数据安全的前沿挑战

在数字化时代&#xff0c;随着社交媒体的普及和应用&#xff0c;个人数据的隐私保护问题日益受到关注。作为全球最大的社交平台之一&#xff0c;Facebook承载了数十亿用户的社交活动和信息交流&#xff0c;但与此同时&#xff0c;也面临着来自内外部的数据安全挑战。本文将深入…

玄机平台应急响应—Linux入侵排查

1、前言 这篇文章主要说一下linux的入侵排查&#xff0c;也就是说当你的服务器已经被入侵的时候&#xff0c;该如何去排查使其恢复正常。下面是排查的步骤&#xff0c;但是实际情况往往更为复杂&#xff0c;需要进一步来分析&#xff0c;而不是无脑的按照步骤来敲就完事了。 …

【FPGA】Verilog语言从零到精通

接触fpga一段时间&#xff0c;也能写点跑点吧……试试系统地康康呢~这个需要耐心但是回报巨大的工作。正原子&&小梅哥 15_语法篇&#xff1a;Verilog高级知识点_哔哩哔哩_bilibili 1Verilog基础 Verilog程序框架&#xff1a;模块的结构 类比&#xff1a;c语言的基础…

07 FreeRTOS 事件组(event group)

1、事件组概念 1.1 基本概念 使用事件组可以等待某个事件、若干事件中的任意一个事件、若干事件中的所有事件&#xff0c;但是不能指定若干事件中的某些事件。 事件组可以简单地认为就是一个整数&#xff1a;这个整数的每一位表示一个事件&#xff1b;每一位事件的含义由程序员…

常用的优化器汇总及keras实现

1.SGD&#xff08;Stochastic Gradient Descent&#xff09; 2.RMSprop&#xff08;Root Mean Square Propagation&#xff09; 3.Adadelta 4.Adam&#xff08;Adaptive Moment Estimation&#xff09; 5.Nadam 6.代码实现 from sklearn.compose import make_column_transforme…

外企如何有效面对日益严格的跨境数据传输法律?

在当今这个数据驱动的时代&#xff0c;随着全球化步伐的加快&#xff0c;企业跨国界的数据交流已成为常态。但随之而来的&#xff0c;是各国政府对跨境数据传输日益严格的规定和监管&#xff0c;这让众多外资企业&#xff08;简称“外企”&#xff09;在享受全球市场红利的同时…

区块链技术和应用

文章目录 前言 一、区块链是什么&#xff1f; 二、区块链核心数据结构 2.1 交易 2.2 区块 三、交易 3.1 交易的生命周期 3.2 节点类型 3.3 分布式系统 3.4 节点数据库 3.5 智能合约 3.6 多个记账节点-去中心化 3.7 双花问题 3.8 共识算法 3.8.1 POW工作量证明 总结 前言 学习长…

大模型智力升级:AI的未来之路

大模型的发展引领了人工智能的新时代&#xff0c;其强大的数据处理和学习能力在医疗、金融、教育等众多领域取得了令人瞩目的成就。然而&#xff0c;随之而来的挑战也不容忽视。尽管大模型在特定任务上展现出了卓越的性能&#xff0c;但它们在理解复杂语境、处理未见情况的能力…

项目日记(1): boost搜索引擎

目录 1. 项目相关背景 2. 搜索引擎的相关宏原理 3. 搜索引擎的技术栈和项目环境 4. 正排索引, 倒排索引, 搜索引擎具体原理 5. 编写数据去标签化和数据清洗的模块parser(解析器). 1.项目相关背景 百度, 搜狗, 360等都有搜索引擎, 但是都是全网的搜索; boost是进行站内搜索…

yq—2024/5/29—零钱兑换

代码实现&#xff1a; #define min(a, b) ((a) > (b) ? (b) : (a))int coinChange(int *coins, int coinsSize, int amount) {int dp[amount 1];// 初始化for (int i 0; i < amount 1; i) {dp[i] INT32_MAX;}dp[0] 0;// 01背包 -----先遍历物品&#xff0c;再遍历背…

社区供稿丨GPT-4o 对实时互动与 RTC 的影响

以下文章来源于共识粉碎机 &#xff0c;作者AI芋圆子 前面的话&#xff1a; GPT-4o 发布当周&#xff0c;我们的社区伙伴「共识粉碎机」就主办了一场主题为「GPT-4o 对实时互动与 RTC 的影响」讨论会。涉及的话题包括&#xff1a; GPT-4o 如何降低延迟&#xff08;VAD 模块可…

安卓开发板_开发评估套件_4G/5G联发科MTK安卓主板定制开发

安卓开发板采用了联发科八核A53 CPU&#xff0c;主频2.0GHz&#xff0c;采用12nm制程工艺&#xff0c;拥有强大的通用计算性能。配备GE8300 GPU&#xff0c;支持1080P视频编码和H.264硬解码&#xff0c;能够解析目前流行的视频和图片格式&#xff0c;非常适合各种功能APP的测试…

Kubernetes和Docker对不同OS和CPU架构的适配关系

Docker Docker官网对操作系统和CPU架构的适配关系图 对于其他发行版本&#xff0c;Docker官方表示没有测试或验证在相应衍生发行版本上的安装&#xff0c;并建议针对例如Debian、Ubuntu等衍生发行版本上使用官方的对应版本。 Kubernetes X86-64 ARM64 Debian系 √ √ Re…