<!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. MySQL数据库：注释及数据类型
			
    注释 /* 多行注释 */ # 单行注释 -- 单行注释(注意:两个但横线后面必须加空格) 数据类型 1.整形 ​ tinyint.smallint.mediumint.int.bigint ​ 小整 ...
    
			
    2. 
						
  2. 通过官网模板轻松实现Grafana的可视化界面配置（以MySQL监控项为例）
			
    我们知道可视化是监控的一个重要环节,所以往往我们这个环节花费大量的时间和精力.可是如果可以借鉴前辈的经验和成果,可以事半功倍.Grafana 有着非常漂亮的图表和布局展示,功能齐全的度量仪表盘和图形编 ...
    
			
    3. 
						
  3. linux下挂载iso镜像文件
			
    linux挂载iso镜像可以分为两种,直接挂载镜像和上传镜像文件至服务器进行挂载 一.虚拟机镜像挂载 测试时使用虚拟机,此时可以直接在虚拟机的设置中将镜像文件直接选择并进行挂载,无需上传至虚拟机服务器 ...
    
			
    4. 
						
  4. 微信小程序如何做金额输入限制
			
    引言:金额输入时,需求如下: 1)首位不能出现0或者小数点(.) 2)仅保留两位小数 3)仅保留一个小数点(.),不允许出现多个. 1.wxml核心代码: <!-- 1.adjust-posit ...
    
			
    5. 
						
  5. linux 的swap、swappiness及kswapd原理【转】
			
    本文讨论的 swap基于Linux4.4内核代码 .Linux内存管理是一套非常复杂的系统,而swap只是其中一个很小的处理逻辑. 希望本文能让读者了解Linux对swap的使用大概是什么样子.阅读完 ...
    
			
    6. 
						
  6. XOR加密作业
			
    思路 -1.对需要加密的内容进行MD5加密 -2.随机生产32位的十六进制密钥 -3.对密钥和MD5加密内容进行异或运算. 主要问题: -1.如何实现MD5加密 -2.如何随机生成32位16进制密钥  ...
    
			
    7. 
						
  7. hdu6464 线段树
			
    http://acm.hdu.edu.cn/showproblem.php?pid=6464 题意 一个空序列,q次操作,一种是往序列后插入x个y,另一种是查询序列中第x小到第y小的数字之和 题解 线 ...
    
			
    8. 
						
  8. C#开发BIMFACE系列28 服务端API之获取模型数据13：获取三维视点或二维视图列表
			
    系列目录     [已更新最新开发文章,点击查看详细] 本篇主要介绍如何获取一个模型中包含的三维视点或二维视图列表. 请求地址:GET https://api.bimface.com/data/v2/ ...
    
			
    9. 
						
  9. 用Python做个海量小姐姐素描图
			
    素描作为一种近乎完美的表现手法有其独特的魅力,随着数字技术的发展,素描早已不再是专业绘画师的专利,今天这篇文章就来讲一讲如何使用python批量获取小姐姐素描画像.文章共分两部分: 第一部分介绍两种使 ...
    
			
    10. 
						
  10. jQuery 源码分析(十六)  事件系统模块 底层方法 详解
			
    jQuery事件系统并没有将事件监听函数直接绑定到DOM元素上,而是基于数据缓存模块来管理监听函数的,事件模块代码有点多,我把它分为了三个部分:分底层方法.实例方法和便捷方法.ready事件来讲,好理 ...
    
			
    11.