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 相关文章推荐
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 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
第二节 对象模型 [2]
2006/10/09 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
php命令行用法入门实例教程
2014/10/27 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
javascript实现表单验证
2016/01/29 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python如何对链表操作
2020/10/10 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
英语专业个人求职信范文
2014/02/01 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
工作迟到检讨书
2014/02/21 职场文书
初三新学期计划书
2014/05/03 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
资产移交协议书
2016/03/24 职场文书