vue操作下拉选择器获取选择的数据的id方法


Posted in Javascript onAugust 24, 2018

实际项目中我们获取选择的数据的id;这时候 需要配合使用v-bind,才能获取到选择的那条数据的id值,其实就是id赋值给value属性

<template>
  <div>
    <select v-model="select" >
      <option v-for="(a,index) in arr" :key="index" :value="a.id">{{ a.name }}</option>
    </select>
    <p>您选择的名字的Id是:{{select}}</p>
  </div>
</template>

js代码

<script>
  export default {
    data(){
      return{
        select:'',
        arr:[
          {id:'1',name:'html'},
          {id:'2',name:'css'},
          {id:'3',name:'js'},
        ] 
      }
    }
  }
</script>

拓展知识:vue获取id以及重定向路由方法

1.获取ID的方法:

let orderId=this.$route.query.id;

2.路由重定向方法

this.$router.push(this.$route.query.redirect || '/login')

以上这篇vue操作下拉选择器获取选择的数据的id方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
AutoSave/自动存储功能实现
Mar 24 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
layui动态表头的实现代码
Aug 22 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
JS严格模式原理与用法实例分析
Apr 27 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 #Javascript
JavaScript中this关键字用法实例分析
Aug 24 #Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 #Javascript
JavaScript原型链与继承操作实例总结
Aug 24 #Javascript
element-ui循环显示radio控件信息的方法
Aug 24 #Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 #Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 #Javascript
You might like
php一些公用函数的集合
2008/03/27 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
毕业生个人投资创业计划书
2014/01/04 职场文书
员工生日活动方案
2014/08/24 职场文书
安全生产年活动总结
2014/08/29 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技