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

案例说明:vue中Element UI下拉列表el-option中的key、value、label含义各是什么

可以简单理解为:label 是给用户展示的东西,value是前端往后端传递的真实值

<template><div><el-page-header @back="goBack" content="注册"></el-page-header><el-divider></el-divider><el-row><el-col :span="12" :offset="6"><el-form ref="form" :model="userInfo" label-width="80px"><el-form-item label="用户名"><el-input v-model="userInfo.username"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="userInfo.password" type="password"></el-input></el-form-item><el-form-item label="确认密码"><el-inputv-model="userInfo.conformPassword"type="password"></el-input></el-form-item><el-form-item label="年龄"><el-input-numberv-model="userInfo.age":min="10":max="100"></el-input-number></el-form-item><el-form-item label="城市"><!-- <el-input v-model="userInfo.city"></el-input> --><el-select v-model="userInfo.city" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="性别"><el-radio v-model="userInfo.gender" :label="0">保密</el-radio><el-radio v-model="userInfo.gender" :label="1"></el-radio><el-radio v-model="userInfo.gender" :label="2"></el-radio></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">注册</el-button><br /><router-link to="/login">登录</router-link></el-form-item></el-form></el-col></el-row></div>
</template><script>
import { registerService } from '../../services/user'export default {data() {return {options: [{value: '选项1',label: '北京'}, {value: '选项2',label: '上海'}, {value: '选项3',label: '广州'}, {value: '选项4',label: '西安'}, {value: '选项5',label: '天津'}],userInfo: {username: '',password: '',conformPassword: '',age: 20,city: '',gender: 0}}},methods: {goBack() {this.$router.push('/').catch(err => { err })},async onSubmit() {// 校验信息const { username, password, conformPassword } = this.userInfoif (!username || !password) {this.$message.error('请输入用户名和密码')return}if (password !== conformPassword) {this.$message.error('两次密码不一致')return}delete this.userInfo.conformPassword// 注册新用户await registerService(this.userInfo)this.goBack()}}
}
</script>
<style scoped>
a {text-decoration: none;
}
</style>

前端展示:
在这里插入图片描述
而我们注册用户信息之后,选择了第四个选项‘西安’,此时数据库中新增的zhangsan信息中,city显示的是‘选项四’,而不是西安。
在这里插入图片描述
在这里插入图片描述

这是因为:我们在前端代码中将value值写做‘选项X’,
此时我们将前端代码中options中做修改:

export default {data() {return {options: [{value: '北京',label: '北京'}, {value: '上海',label: '上海'}, {value: '广州',label: '广州'}, {value: '西安',label: '西安'}, {value: '天津',label: '天津'}],userInfo: {username: '',password: '',conformPassword: '',age: 20,city: '',gender: 0}}},

重新注册wangwu的信息,并选择第四项‘西安’,此时数据库中新增user信息:wangwu的city为‘西安’
在这里插入图片描述
在这里插入图片描述

总结:

label 这是给用户看的,当点击下拉菜单时,会出来选项,用户看到的选项就是label展示的内容
value 这是你点击某个label(option)之后,将对应的值给v-model绑定的值model
key 相当于身份令牌,唯一的,官网推荐还是加上,所以大家记得一定要加key值哦~

相关文章:

案例说明:vue中Element UI下拉列表el-option中的key、value、label含义各是什么

可以简单理解为&#xff1a;label 是给用户展示的东西&#xff0c;value是前端往后端传递的真实值 <template><div><el-page-header back"goBack" content"注册"></el-page-header><el-divider></el-divider><el-…...

idea创建javaweb项目步骤超详细(2022最新版本)

目录 前言必读 一、新建文件 1.在idea里面点击文件-新建-项目 2.新建项目-更改名称为自己想要的项目名称-创建 3.右键自己建立的项目-添加框架支持&#xff08;英文版是Add Framework Support...&#xff09; 4.勾选Web应用程序-确定 5.建立成功界面 二、配置tomcat 6.…...

「SAP ABAP」OPEN SQL(六)【DELETE语句 | MODIFY语句】

💂作者简介: THUNDER王,一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学本科在读,同时任汉硕云(广东)科技有限公司ABAP开发顾问。在学习工作中,我通常使用偏后端的开发语言ABAP,SQL进行任务的完成,对SAP企业管理系统,SAP ABAP开发和数据库具有较…...

SpringCloud --- Feign远程调用

一、RestTemplate问题 先来看我们以前利用RestTemplate发起远程调用的代码&#xff1a; 存在下面的问题&#xff1a; 代码可读性差&#xff0c;编程体验不统一参数复杂URL难以维护 Feign是一个声明式的http客户端&#xff0c;官方地址&#xff1a;GitHub - OpenFeign/feign:…...

基于单片机的数字频率计设计

数字频率计概述 数字频率计是计算机、通讯设备、音频视频等科研生产领域不可缺少的测量仪器。它是一种用十进制数字显示被测信号频率的数字测量仪器。它的基本功能是测量正弦信号&#xff0c;方波信号及其他各种单位时间内变化的物理量。在进行模拟、数字电路的设计、安装、调试…...

我看看哪个靓仔还没把Github Copilot用起来?

本人经常分享有价值的生产力工具、技术、好物与书籍&#xff0c;可关注同名公众&#x1f42d;并设为&#x1f31f;星标&#xff0c;第一时间获得更新 Github Copilot 是一个AI编程助手&#xff0c;其使用 OpenAI CodeX 在你的编辑器中实时建议代码或给你实现整个功能。 视频版介…...

C++系列一: C++简介

C入门简介 1. C语言的特点2. C编译器3. 第一个 C 程序4. 总结&#xff08;手稿版&#xff09; C 是一种高级编程语言&#xff0c;是C语言的扩展和改进版本&#xff0c;由Bjarne Stroustrup于1983年在贝尔实验室为了支持C语言中的面向对象编程而创建。C 既能够进行底层的系统编程…...

信通初试第一:无科研无竞赛一战上岸上海交大819学硕感悟

笔者来自通信考研小马哥23上交819全程班学员 信通初试第一&#xff1a;无科研无竞赛一战上岸上海交大819学硕感悟 原创2023-04-27 11:04通信考研小马哥 笔者来自通信考研小马哥23上交819全程班学员 本人情况&#xff1a; 本人是19届交本&#xff0c;本科成绩很差&#xff0c;…...

Spring —— Spring Boot 配置文件

JavaEE传送门 JavaEE Spring —— Bean 作用域和生命周期 Spring —— Spring Boot 创建和使用 目录 Spring Boot 配置文件Spring Boot 配置文件格式properties配置文件properties 基本语法properties 缺点 yml 配置文件yml 基本语法yml 配置不同类型数据及 nullyml 配置对象…...

Python 网络爬虫与数据采集(一)

Python 网络爬虫与数据采集 第1章 序章 网络爬虫基础1 爬虫基本概述1.1 爬虫是什么1.2 爬虫可以做什么1.3 爬虫的分类1.4 爬虫的基本流程1.4.1 浏览网页的流程1.4.2 爬虫的基本流程 1.5 爬虫与反爬虫1.5.1 爬虫的攻与防1.5.2 常见的反爬与反反爬 1.6 爬虫的合法性与 robots 协议…...

2023年6月DAMA-CDGP数据治理专家认证请尽快报名啦!

目前6月DAMA-CDGP数据治理认证考试开放报名地区有&#xff1a;北京、上海、广州、深圳、长沙、呼和浩特。 目前南京、济南、西安、杭州等地区还在接近开考人数中&#xff0c;打算参加6月考试的朋友们可以抓紧时间报名啦&#xff01;&#xff01;&#xff01; 5月初&#xff0c;…...

STM32+esp8266,让你的STM32开发板连接网络-----esp8266

分享一下&#xff0c;STM32开发板连接网络的第一种方法&#xff1a;连接esp8266。 esp8266与STM32利用串口通信连接&#xff0c;esp8266连接网络&#xff0c;把收到的数据通过串口的方式传输给STM32&#xff0c;之后STM32接收到消息做出对应的反应。 使用到的开发板如图&…...

分布式缓存的基础知识

前言 现代互联网应用中&#xff0c;分布式缓存成为了必不可少的一环。它通过在多台服务器之间共享数据&#xff0c;避免了网络通信的高延迟和低带宽的性能问题。本文将介绍分布式缓存的基础知识&#xff0c;包括缓存机制、常见的缓存策略以及缓存的使用场景。 缓存机制 缓存是…...

Vue3通透教程【七】生命周期函数

文章目录 🌟 写在前面🌟 生命周期钩子函数🌟 组合式API生命周期🌟 写在最后🌟 写在前面 专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选…...

《“裸奔”时代的网络防护:如何保护你的隐私和数据安全》

一、引言 在此时此刻&#xff0c;你可能正在使用电子设备阅读这篇文章。你可能在一天中的大部分时间都在与网络世界互动&#xff0c;无论是通过电子邮件、社交媒体、在线购物&#xff0c;还是通过流媒体服务消费内容。然而&#xff0c;你有没有考虑过&#xff0c;当你在享受这些…...

mapreduce优化方法

1&#xff09;数据输入&#xff1a; 1&#xff09;合并小文件&#xff1a;在执行mr任务前将小文件进行合并&#xff0c;大量的小文件会产生大量的map任务&#xff0c;增大map任务装载次数&#xff0c;而 任务的装载比较耗时&#xff0c;从而导致 mr 运行较慢。 2&#xff09;…...

06-nexus搭建Docker私仓

使用nexus创建docker私有仓库 Nexus的安装请参考该文档&#xff1a;https://www.yuque.com/tmfl/pom/uumrx2 Nexus配置Docker仓库步骤&#xff1b; nexus默认docker是失效的&#xff0c;需要 在security --> Realms&#xff0c;将docker配置成Active在 Repository 的 Blo…...

【RS专题】eval层混淆和逻辑完整分析 - 扣代码终结篇

如有侵权、联系本人下架 首先明确一下目标,我们要先获取网页200的源代码,RS5代第一次响应为412,第二次为200。如果是200就表示正常 以下为某 yjj RS5请求成功的结果,具体流程请看完文章,源-码–答-案也会在末 尾公 布 前面是定义了非常多和函数,一直往下拉,直到出现v…...

基于matlab使用主动声纳系统进行水下目标检测

一、前言 此示例演示如何模拟具有两个目标的主动单基地声纳方案。声纳系统由各向同性投影仪阵列和单个水听器元件组成。投影仪阵列呈球形。反向散射信号由水听器接收。接收到的信号包括直接和多路径贡献。 二、水下环境 在浅水环境中&#xff0c;声源和目标之间存在多个传播路径…...

[socket]hpsocket-pull模式

为什么要用pull模式呢&#xff0c;我不是所谓的别人说pull效率高&#xff0c;是因为包头的长度 int不是固定长度。服务器IO-HPSocket PUSH&#xff1a;收到数据立马触发OnReceive&#xff0c;由开发人员自己实现拆包和缓冲区的管理逻辑。 PULL&#xff1a;收到数据立马触发OnR…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...