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 相关文章推荐
JavaScript 代码压缩工具小结
Feb 27 Javascript
JS模板实现方法
Apr 03 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
iScroll.js 使用方法参考
May 16 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
浅谈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
10款实用的PHP开源工具
2015/10/23 PHP
php实现的递归提成方案实例
2015/11/14 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
jquery创建div 实现代码
2009/04/27 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
Django CBV类的用法详解
2019/07/26 Python
Python将string转换到float的实例方法
2019/07/29 Python
Python实现微信机器人的方法
2019/09/06 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
教师自我鉴定
2013/12/13 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
民事纠纷协议书
2016/03/23 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python