1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <!-- import CSS -->
  6.   <link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">
  7. </head>
  8. <body>
  9.   <div id="app">
  10.       <el-select v-model="opvalue" placeholder="请选择">   //这里v-model获取的是value值
  11.         <el-option
  12.           v-for="item in options"
  13.              :key="item.value"
  14.           :label="item.label"
  15.           :value="item.value">
  16.         </el-option>
  17.       </el-select>
  18.       <el-button type="success" @click="getdata">提交</el-button>
  19.    </div>
  20. </body>
  21.  
  22.   <!-- import Vue before Element -->
  23.   <script src="https://unpkg.com/vue/dist/vue.js"></script>
  24.   <!-- import JavaScript -->
  25.   <script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script>
  26.   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  27.  
  28.   <script>
  29.     new Vue({
  30.       el: '#app',
  31.         data() {
  32.           return {
  33.              options: [{
  34.                       value: '1',
  35.                       label: '黄金糕'
  36.                     }, {
  37.                       value: '2',
  38.                       label: '双皮奶'
  39.                     }, {
  40.                       value: '3',
  41.                       label: '蚵仔煎'
  42.                     }, {
  43.                       value: '4',
  44.                       label: '龙须面'
  45.                     }, {
  46.                       value: '5',
  47.                       label: '北京烤鸭'
  48.                     }],
  49.               opvalue: '',
  50.               mylabel:'',
  51.           };
  52.         },
  53.  
  54.       methods: {
  55.         getdata(){
                 //获取label值
  56.             for(let key in this.options){
  57.                 if( this.options[key].value==this.opvalue){
  58.                     this.mylabel=this.options[key].label
  59.                 }
  60.             }
  61.             let params={
  62.                 value:this.opvalue,
  63.                 label:this.mylabel
  64.             };
  65.  
  66.             console.log(params)
  67.         }
  68.       },
  69.  
  70.       created(){
  71.          // axios.get("./data/a.json").then(res=>{
  72.             //  console.log(res.data[0])
  73.             //  this.opvalue=res.data[0].label;
  74.          // }).catch(err=>{
  75.             //  console.log(err);
  76.          // })
  77.       }
  78.     })
  79.   </script>
  80. </html>
  1. // 在多选框中  v-model中获取的值,是value值  传递给后台的值.
  2. // 如何同时获取label和value呢？
  3. // 如何一个方法中,有for循环,for循环中有break,它将不仅跳出for循环,还会跳出这个方法
  1.  
  1.  
  1.  

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

  1. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  2. jq 如何获取多选框选中的值

    jquery如何获取多选框选中的值,有两种方法 1.通过id获取是否选中(单个) 1)引入jquery文件 2)Html设计如下 <div> <span>运动类:</sp ...

  3. 《jquery权威指南2》学习笔记------ jquery获取复选框的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. jquery获取复选框checkbox的值

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...

  5. jsp获取多选框组件的值

    jsp获取多选框组件的值 1.首先写一个带有多选框的前台页 1 <%@ page language="java" contentType="text/html; c ...

  6. 获取url中的参数\+发送ajax请求根路径|+获取复选框的值

    //获取url中的参数function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=( ...

  7. 【JSP/Servlet】后台如何获取复选框或可选属性的同名参数

    感觉自己jsp/servlet部分学的太差了--今天突然想到还有这种操作,遂分享之 比如有些时候我们需要使用复选框发送同名数据的时候,后台接收参数是个麻烦事,还有可选属性也是如此 有丰富经验的会想到a ...

  8. jquery 获取奇数索引的元素，获取复选框，判断是否选中

    $(".btn-xs:odd").click(function(){ var $buy_num=$(this).prev("#buy_num").val(); ...

  9. I方法怎么不能获取多选框的数据

    前端代码 <input type="checkbox" name="m_name" value="{$vo.name}" class ...

随机推荐

  1. curl的使用指南

    一.查看网页源码 直接在curl命令后加上网址,就可以看到网页源码.我们以网址www.sina.com为例(选择该网址,主要因为它的网页代码较短): $ curl www.sina.com ​   M ...

  2. 25个JavaScript数组方法代码示例

    摘要: 通过代码掌握数组方法. 原文:通过实现25个数组方法来理解及高效使用数组方法(长文,建议收藏) 译者:前端小智 Fundebug经授权转载,版权归原作者所有. 要在给定数组上使用方法,只需要通 ...

  3. 由导入paramkio包失败，而pip list又能查到此包，而引出的:离线安装python第三方库的实用方法:解决公司内网，服务器/电脑不能上网却需要安装python三方库问题(下:Linux环境中)

    问题描述: 公司的Linux服务器是内网,今天要实现某个功能,会用到python控制ssh,需要安装一个Paramkio库,和上一篇一样,仅仅依靠Pypi上下载下来的离线.whl安装包是不行的,lin ...

  4. ERROR: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: '/Library/Python/2.7/site-packages/itsdangerous' Consider using the `--user` option or check the permissions

    近期练习flask写个blog, 安装flask扩展时 pip install Flask-WTF 报ERROR: Could not install packages due to an Envir ...

  5. sso单点登录系统的压力测试

    环境:vmware centos7.4 2cpu 2核心 工具:ab压力测试工具 测试对象:sso单点登录系统 电脑:win10 4核 项目环境:flask+uwsgi+nginx(uwsgi 2进程 ...

  6. Linux：Apache服务器的搭建

    下载安装并启动apache服务 安装apache服务 yum install -y httpd 启动apache服务 systemctl start httpd.service apache服务器的目 ...

  7. Ubuntu下Xilinx Linux内核编译问题，出现“缺少ncurses”libraries

    对官方提供的内核源码包进行解压缩,进入到内核目录,使用make menuconfig后,发现提示以下错误: *** Unable to find the ncurses libraries or th ...

  8. July 20th, 2019. Week 29th, Saturday

    If we just open the door a crack, the light comes pouring in. 只要把门开个小口,光就会倾泻而入. Don't be so disheart ...

  9. CSP2019 S2滚粗记

    最好分数:100+20+10+64+64+55 最坏分数:100+20+10+64+36+55 咕咕数据分数:100+25+10+64+60+55 CCF官方: 100+35+10+64+36+55= ...

  10. bzoj1812 [IOI2005]riv河流

    题目链接 problem 给出一棵树,每个点有点权,每条边有边权.0号点为根,每个点的代价是这个点的点权\(\times\)该点到根路径上的边权和. 现在可以选择最多K个点.使得每个点的代价变为:这个 ...