<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <!-- import CSS -->

  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">

</head>

<body>

  <div id="app">

      <el-select v-model="opvalue" placeholder="请选择">   //这里v-model获取的是value值

        <el-option

          v-for="item in options"

             :key="item.value"

          :label="item.label"

          :value="item.value">

        </el-option>

      </el-select>

      <el-button type="success" @click="getdata">提交</el-button>

   </div>

</body>

  <!-- import Vue before Element -->

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <!-- import JavaScript -->

  <script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>

    new Vue({

      el: '#app',

        data() {

          return {

             options: [{

                      value: '1',

                      label: '黄金糕'

                    }, {

                      value: '2',

                      label: '双皮奶'

                    }, {

                      value: '3',

                      label: '蚵仔煎'

                    }, {

                      value: '4',

                      label: '龙须面'

                    }, {

                      value: '5',

                      label: '北京烤鸭'

                    }],

              opvalue: '',

              mylabel:'',

          };

        },

      methods: {

        getdata(){
             //获取label值

            for(let key in this.options){

                if( this.options[key].value==this.opvalue){

                    this.mylabel=this.options[key].label

                }

            }

            let params={

                value:this.opvalue,

                label:this.mylabel

            };

            console.log(params)

        }

      },

      created(){

         // axios.get("./data/a.json").then(res=>{

            //  console.log(res.data[0])

            //  this.opvalue=res.data[0].label;

         // }).catch(err=>{

            //  console.log(err);

         // })

      }

    })

  </script>

</html>
// 在多选框中  v-model中获取的值,是value值  传递给后台的值.

// 如何同时获取label和value呢？

// 如何一个方法中,有for循环,for循环中有break,它将不仅跳出for循环,还会跳出这个方法


 


												


											
elementui-如何同时获取多选框的label和value的更多相关文章
	

    
								
  1. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值
		
    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...
    
		
    2. 
						
  2. jq 如何获取多选框选中的值
		
    jquery如何获取多选框选中的值,有两种方法 1.通过id获取是否选中(单个) 1)引入jquery文件 2)Html设计如下 <div> <span>运动类:</sp ...
    
		
    3. 
						
  3. 《jquery权威指南2》学习笔记------ jquery获取复选框的值
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
    
		
    4. 
						
  4. jquery获取复选框checkbox的值
		
    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...
    
		
    5. 
						
  5. jsp获取多选框组件的值
		
    jsp获取多选框组件的值 1.首先写一个带有多选框的前台页 1 <%@ page language="java" contentType="text/html; c ...
    
		
    6. 
						
  6. 获取url中的参数\+发送ajax请求根路径|+获取复选框的值
		
    //获取url中的参数function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=( ...
    
		
    7. 
						
  7. 【JSP/Servlet】后台如何获取复选框或可选属性的同名参数
		
    感觉自己jsp/servlet部分学的太差了--今天突然想到还有这种操作,遂分享之 比如有些时候我们需要使用复选框发送同名数据的时候,后台接收参数是个麻烦事,还有可选属性也是如此 有丰富经验的会想到a ...
    
		
    8. 
						
  8. jquery 获取奇数索引的元素，获取复选框，判断是否选中
		
    $(".btn-xs:odd").click(function(){ var $buy_num=$(this).prev("#buy_num").val();  ...
    
		
    9. 
						
  9. I方法怎么不能获取多选框的数据
		
    前端代码 <input type="checkbox" name="m_name" value="{$vo.name}" class  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. express搭建后端请求路由，前端进行访问对应的接口  后端解决跨域
			
    代码在 ==>E:\nodes实战\myserve\testserve 1 express搭建后端请求路由,前端进行访问对应的接口 1) 创建项目目录 express 项目名 -e 然后按照提示 ...
    
			
    2. 
						
  2. LG5202  「USACO2019JAN」Redistricting  动态规划+堆/单调队列优化
			
    问题描述 LG5202 题解 \[opt[i]=xx+(cnt[i]-cnt[yy]<=0)\] 发现\(cnt[i]-cnt[yy] <= 0\)只能有两种取值 于是直接堆优化即可 \( ...
    
			
    3. 
						
  3. 《Java面试全解析》505道面试题详解
			
    <Java面试全解析>是我在 GitChat 发布的一门电子书,全书总共有 15 万字和 505 道 Java 面试题解析,目前来说应该是最实用和最全的 Java 面试题解析了. 我本人是 ...
    
			
    4. 
						
  4. Spring-AOP-配置实现五大通知
			
    码云: xml配置方法:https://gitee.com/MarkPolaris/spring_aop_1 注解配置方法:https://gitee.com/MarkPolaris/spring-e ...
    
			
    5. 
						
  5. .NET 时间轴：从出生到巨人
			
    自1995年互联网战略日以来最雄心勃勃的事业 —— 微软.NET战略, 2000年6月30日. 微软于2000年推出基于Windows操作系统的应用软件开发框架.NET,发展至今形成巨大的技术栈,涉及 ...
    
			
    6. 
						
  6. python文件操作【目录大全】
			
    总是记不住API.昨晚写的时候用到了这些,但是没记住,于是就索性整理一下吧: python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Pyth ...
    
			
    7. 
						
  7. Python画一棵漂亮的樱花树（不同种樱花+玫瑰+圣诞树喔）
			
    不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给大家(这些我都测试过,确实可以生成喔~)one 樱花树 动态生成樱花效果图(这个是动态的) ...
    
			
    8. 
						
  8. python接口自动化11-pytest入门
			
    前言 pytest是一个非常成熟的全功能的Python测试框架,适合从简单的单元到复杂的功能测试,主要特点有以下几点: 简单灵活,容易上手: 支持参数化: 能够支持简单的单元测试: 标记测试功能与属性 ...
    
			
    9. 
						
  9. 【UOJ#242】【UR#16】破坏蛋糕（计算几何）
			
    [UOJ#242][UR#16]破坏蛋糕(计算几何) 题面 UOJ 题解 为了方便,我们假定最后一条直线是从上往下穿过来的,比如说把它当成坐标系的\(y\)轴. 于是我们可以处理出所有交点,然后把它们 ...
    
			
    10. 
						
  10. Fusionstorage的逻辑架构
			
    Fusionstorage Fusionstorage的逻辑架构 Mdc:元数据控制,实现对分布式集群的状态控制,以及控制数据分布式规则,数据重建规则等,mdc默认部署在3个节点的zk盘上,形成mdc ...
    
			
    11.