vue之elementUi的el-select同时获取value和label的两种方法

news2024/11/28 12:46:02

在这里插入图片描述

一、通过ref的形式(推荐)

<template>
  <div class="root">
    <el-select
      ref="optionRef"
      v-model="value"
      placeholder="请选择"
      style="width: 250px"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button style="margin-left: 20px" @click="showoptions" type="primary" >查看</el-button >
  </div>
</template>
data() {
    return {
      value: "",
      options: [
        { id: 0, label: "苹果", value: "apple" },
        { id: 1, label: "香蕉", value: "banana" },
        { id: 2, label: "橙子", value: "orange" },
      ],
    };
  },

methods: {
    showoptions() {
      console.log(
        this.$refs.optionRef.selected.value,
        this.$refs.optionRef.selected.label
      );
    },
  },


二、字符串拼接的形式(推荐)

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kubernetes实战(二十三)-k8s event监控利器kube-eventer对接企微告警

1 背景 监控是保障系统稳定性的重要组成部分&#xff0c;在Kubernetes开源生态中&#xff0c;资源类的监控工具与组件监控比较多。 cAdvisor&#xff1a;kubelet内置的cAdvisor&#xff0c;监控容器资源&#xff0c;如容器cpu、内存&#xff1b;Kube-state-metrics&#xff1…

自动驾驶:Apollo如何塑造人类的未来出行

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言1. 什么是自定义指令&#xff1f;2. Apollo中的自定义指令2.1 查询中的自定…

JSON巨匠:FastJSON的序列化解析

Fastjson 简介 Fastjson 是一个 Java 库&#xff0c;可以将 Java 对象转换为 JSON 格式&#xff0c;当然它也可以将 JSON 字符串转换为 Java 对象。 Fastjson 可以操作任何 Java 对象&#xff0c;即使是一些预先存在的没有源码的对象。 Fastjson 源码地址&#xff1a;https://…

数据可视化 pycharts实现时间数据可视化

自用版 数据格式为&#xff1a; 运行效果为&#xff1a; from pyecharts import options as opts from pyecharts.charts import Polar, Page import csv filename "./hot-dog-places.csv" data_x [] data_y [] with open(filename) as f:reader csv.reade…

有向图查询所有环,非递归

图&#xff1a; 有向图查询所有环&#xff0c;非递归&#xff1a; import java.util.*;public class CycleTest {private final int V; // 顶点数private final List<List<Integer>> adjList; // 邻接表public CycleTest(int vertices) {this.V vertices;this.…

python基础——池

池的介绍&#xff1a; 提前创建进程池&#xff0c;防止创建的进程数量过多导致系统性能受到影响&#xff0c;在系统执行任务时&#xff0c;系统会使用池中已经创建进程/线程&#xff0c;从而防止资源的浪费&#xff0c;创建的进程/线程可以让多个进程使用&#xff0c;从而降低…

SW-LIMS实现化工企业危险化学品信息化管理

随着化工产业的不断发展,危险化学品的生产和使用在经济和社会发展中扮演着重要的角色。然而,危险化学品的安全隐患也同样日益突出,从危化品的生产到储存、运输和使用,如果控制不当,很容易造成安全事故,而一旦发生安全事故,不仅会造成巨大的经济损失,还将威胁到人类的生命健康与…

FFmpeg和Monibuka拉取rtsp(大华摄像头)视频流时未进行URLCode编码导致提示404等报错

场景 Monibucav4(开源流媒体服务器)在Windows上搭建rtmp服务器并实现拉取rtsp视频流以及转换flv播放&#xff1a; Monibucav4(开源流媒体服务器)在Windows上搭建rtmp服务器并实现拉取rtsp视频流以及转换flv播放_monibuca 搭建流媒体服务-CSDN博客 Nginx搭建RTMP服务器FFmpeg…

C++引用、内联函数、auto关键字介绍以及C++中无法使用NULL的原因

文章目录 一、引用1.1 引用概念1.2 引用特性1.3 常引用1.4 使用场景1.4.1 做参数1.4.2做返回值 1.5 引用和指针的区别1.6 小结一下 二、内联函数2.1 内联的概念2.2 内联的特性2.3 【面试题】 三、auto关键字(C11)3.1 类型别名思考3.2 auto简介 四、auto的使用细则4.1 基于范围的…

Aloudata 近期荣誉盘点!接连斩获技术创新、案例实践、投资价值等权威认可

近期&#xff0c;Aloudata 凭借持续的技术积累、丰富的产品与解决方案以及多样场景下的最佳实践案例&#xff0c;在数据智能技术创新、案例实践、投资价值等领域全面开花&#xff0c;接连荣获&#xff1a; 2023 金猿榜「大数据产业年度最具投资价值」企业&#xff0c;并携手首…

APP开发者对接穿山甲广告联盟,有哪些特点?收益如何?

穿山甲平台作为巨量引擎旗下的第三方广告变现平台&#xff0c;在行业内始终处于领先地位&#xff0c;是不少开发者首选的对接平台。 通过穿山甲广告GroMore的Bidding竞价能力&#xff0c;不断提升自身的变现效率&#xff0c;新手可直接上手&#xff0c;避免繁琐调优流程&#…

PVE报错处理:kvm [2205]: vcpu0 ignored RDMSR: 0x1b8

PVE使用过程中如果遇到&#xff1a;kvm [2205]: vcpu0 ignored RDMSR: 0x1b8 报错信息处理方法 vim /etc/modprobe.d/kvm.conf "options kvm ignore_msrsY"&#xff0c;这里在msrsY后面加一个空格&#xff0c;然后粘贴report_ignored_msrsN&#xff0c;使其变成 op…

如何在微信搭建私域流量池?

A: ①给客户打标签 添加标签&#xff0c;多维度构建用户画像&#xff0c;精准发送消息。 ②群发信息 选择自定义时间&#xff0c;上传内容 (支持文字&#xff0c;图片) &#xff0c;一键群发 。 ③建立专属素材库 将常用的话术、图片与文件录入至素材库&#xff0c;员工可随…

微信小程序(基本操作)

概念&#xff1a; 小程序&#xff1a;就是小程序&#xff0c;mini program。现在市面上有微信小程序&#xff0c;百度智能小程序等等。 微信小程序&#xff0c;简称小程序&#xff0c;英文名Mini Program&#xff0c;是一种不需要下载安装即可使用的应用&#xff0c;它实现了…

【算法】不懂数学原理也能看得懂的KMP算法

一.KMP算法的作用 举个例子&#xff0c;excel表格大家都用过吧&#xff0c;在表格内按下“CtrlF”可以弹出“查找和替换”功能&#xff0c;输入我们想要查找的关键字&#xff0c;系统就会帮我们定位到具体的位置&#xff0c;没有找到就上报具体的错误信息&#xff0c;KMP算法的…

解释性人工智能(XAI)

引言 解释性人工智能&#xff08;XAI&#xff09;是指一类旨在使人能够理解和解释机器学习模型的方法和技术。XAI的目标是提高AI系统的透明度和可理解性&#xff0c;让人们能够理解机器学习模型的决策过程、推理方式和结果。这对于社会应用和用户信任非常重要&#xff0c;因为A…

Axure 怎么用?一篇文章告诉你

Axure RP 9 该软件是一个非常实用的原型设计工具&#xff0c;了解 Axure、学会使用 Axure&#xff0c;作为产品经理&#xff0c;UI、界面规划等岗位的基本技能。特别是对于产品经理来说&#xff0c;画出优秀的原型可以更好地表达产品需求&#xff0c;提高沟通效率。如何快速入门…

Leetcode第382场周赛

Leetcode第382场周赛 本人水平有限&#xff0c;只做前三道。 一、按键变更的次数 给你一个下标从 0 开始的字符串 s &#xff0c;该字符串由用户输入。按键变更的定义是&#xff1a;使用与上次使用的按键不同的键。例如 s “ab” 表示按键变更一次&#xff0c;而 s “bBBb”…

网络工程师学习笔记——HDLCPPP

继续学习计算机网络技术——HDLC&PPP 一、HDLC HDLC&#xff08; High-Level Data Link Control &#xff09;&#xff1a;高级数据链路控制 HDLC是一种面向比特的链路层协议。 HDLC的作用&#xff1a;接口地址借用&#xff0c;节省IP地址&#xff0c;使地址更加稳定 …

Javaweb实现的学生宿舍管理系统

Javaweb实现的学生宿舍管理系统 文章目录 Javaweb实现的学生宿舍管理系统系统介绍技术选型成果展示源码获取账号地址及其他说明 系统介绍 Javaweb实现的学生宿舍管理系统采用jspservlet技术实现了如下功能模块&#xff0c;分别是宿舍管理员管理、学生管理、宿舍楼管理、缺勤记…