vue操作下拉选择器获取选择的数据的id方法
更新时间：2018年08月24日 14:06:38 作者：素燃
今天小编就为大家分享一篇vue操作下拉选择器获取选择的数据的id方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
实际项目中我们获取选择的数据的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方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue2.0在没有dev-server.js下的本地数据配置方法
这篇文章主要介绍了vue2.0在没有dev-server.js下的本地数据配置方法的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了如何构建一个Vue插件并生成npm包，帮助大家更好的理解和使用vue，方便以后的开发，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了vuecli4中如何配置打包使用相对路径，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
本节，我们将讨论关于AST的转换。所谓AST的转换，指的是对AST进行一系列操作，将其转换为新的AST的过程。新的AST可以是原语言或原DSL的描述，也可以是其他语言或其他DSL的描述。例如，我们可以对模板AST进行操作，将其转换为JavaScriptAST2023-01-01
这篇文章主要介绍了通过vue手动封装on，emit，off的代码详解，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则)
这篇文章主要介绍了element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则),本篇文章记录el-table增加一行可编辑的数据列,进行增删改,感兴趣的朋友跟随小编一起看看吧2024-07-07
在现代Web应用中,集成文档编辑功能变得越来越常见,特别是在协作环境中,能够直接在Web应用内编辑Word文档可以极大地提高工作效率,本文将详细介绍如何在Vue.js项目中集成Word在线编辑功能,需要的朋友可以参考下2024-08-08
在 Web 应用中,生成二维码是常见的需求,本文介绍如何用 Vue3 和 TypeScript 开发一个二维码生成组件,支持生成图片或 canvas 形式的二维码,并提供丰富的配置选项,感兴趣的小伙伴跟着小编一起来看看吧2024-04-04
Vue报错Syntax Error:TypeError: this.getOptions is not a
前几天在vue运行项目过程中报错了,所以下面这篇文章主要给大家介绍了关于Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法,需要的朋友可以参考下2022-07-07
今天小编就为大家分享一篇解决vue脚手架项目打包后路由视图不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论