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

(编辑:jimmy 日期: 2025/1/19 浏览:2)

实际项目中我们获取选择的数据的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方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

一句话新闻

Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。