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 相关文章推荐
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
JS运算符简单用法示例
Jan 19 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加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php实现点击可刷新验证码
2015/11/07 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python实现二分法算法实例
2015/02/02 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python编写一个闹钟功能
2017/07/11 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
求职信格式范本
2013/11/15 职场文书
怎样写演讲稿
2014/01/04 职场文书
求职简历的自我评价
2014/01/31 职场文书
奥利奥广告词
2014/03/20 职场文书
汽车广告策划方案
2014/05/31 职场文书
应聘护士求职信
2014/07/21 职场文书
公民授权委托书范本
2014/09/17 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
公司离职证明标准范本
2014/10/05 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书