Vue如何获取下拉框中选中的value值和label值

 更新时间:2023年10月13日 11:01:08   作者:Vanllen_moon  
这篇文章主要介绍了Vue如何获取下拉框中选中的value值和label值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue获取下拉框中选中的value值和label值

使用v-for循环渲染选择项,如下图例子

例子中allVillage为数组,每个数组元素是对象,对象中含有id和name

例子

:value与v-model的值是互相绑定的,可以在data中定义变量进而直接获取到

例子

如图,可以通过this,paneOneForm.villageId拿到value中绑定的id值

获取选中的文本值,即label值,结合使用数组的find方法

let obj = {}
obj = this.allVillage.find((item) => item.id === this.paneOneForm.villageId)
this.paneOneForm.villageName = obj.name

此处paneOneForm.villageName即下拉框选中的文本label值

Vue获取下拉框的选中值以及下标

<select class="select" v-on:change="indexSelect($event)" v-model="pcNum">
	<option v-for="(item, index) in pcArr" :key="index" v-bind:value="item.pcNum">{{ item.pcNum }}</option>
</select>

js:

data() {
return {
pcNum:'PC20200924',
pcArr:[
{id:1, pcNum: 'PC20200924'},
{id:2, pcNum: 'PC20200925'},
{id:3, pcNum: 'PC20200926'}
],
 }
},
methods:{
indexSelect(e){
console.log(e)
console.log(e.target.selectedIndex) // 选择项的index索引
console.log(e.target.value) // 选择项的value,也就是v-bind:value 的绑定值,如果换成 v-bind:value="item.id",则打印的是 选中项的id
}
}

在这里插入图片描述

扩展:

获取下拉框选中项的其他值,如选中蓝色妖姬时获取它的英文名 bluerose

<select class="select select2" @change="classSelect($event)"  v-model="classs">
	 <option v-for="(item, index) in classsArr" :key="index" v-bind:value="item.name">{{ item.name }}</option>
</select>

js:

data() {
 return {
classs:'',
classsArr: [{name: "蓝色妖姬", table: "bluerose"}, {name: "烟叶",table: "tobaccoleaf"},{name: "佛手瓜", ?table: "chayote"}]
 };
},
methods: {
classSelect(e){
var table=''
for (var i in this.classsArr) {
i=e.target.selectedIndex
table=this.classsArr[i].table
}
console.log(table)
},
}

或者

<select class="select select2" @change="classSelect" ?v-model="classs">
 <option v-for="item in classsArr" :key="item.table" v-bind:value="item.table" :label="item.name"></option>
</select>

js:

data() {
 return {
classs:'',
classsArr: [{name: "蓝色妖姬", table: "bluerose"}, {name: "烟叶",table: "tobaccoleaf"},{name: "佛手瓜", ?table: "chayote"}]
 };
},
methods: {
classSelect(){
console.log(this.classs)
},
}

在这里插入图片描述

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • element多个table实现同步滚动的示例代码

    element多个table实现同步滚动的示例代码

    本文主要介绍了element多个table实现同步滚动,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue项目使用可选链操作符编译报错问题及解决

    vue项目使用可选链操作符编译报错问题及解决

    这篇文章主要介绍了vue项目使用可选链操作符编译报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue 基于abstract 路由模式 实现页面内嵌的示例代码

    vue 基于abstract 路由模式 实现页面内嵌的示例代码

    这篇文章主要介绍了vue 基于abstract 路由模式 实现页面内嵌的示例代码,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • Vue-路由导航菜单栏的高亮设置方法

    Vue-路由导航菜单栏的高亮设置方法

    下面小编就为大家分享一篇Vue-路由导航菜单栏的高亮设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 在Vue中延迟执行某个函数的实现方式

    在Vue中延迟执行某个函数的实现方式

    在Vue中延迟执行某个函数,你可以使用setTimeout()函数或者Vue提供的生命周期钩子函数,本文通过一些示例代码给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-12-12
  • spring-cloud-stream的手动消息确认问题

    spring-cloud-stream的手动消息确认问题

    这篇文章主要介绍了spring-cloud-stream的手动消息确认问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue 注释template中组件的属性说明

    vue 注释template中组件的属性说明

    这篇文章主要介绍了vue 注释template中组件的属性说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中使用mixins/extends传入参数的方式

    vue中使用mixins/extends传入参数的方式

    这篇文章主要介绍了vue中使用mixins/extends传入参数的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 详解vue-router的导航钩子(导航守卫)

    详解vue-router的导航钩子(导航守卫)

    这篇文章主要介绍了详解vue-router的导航钩子(导航守卫),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • 使用vue-router在Vue页面之间传递数据的方法

    使用vue-router在Vue页面之间传递数据的方法

    这篇文章主要介绍了使用vue-router在Vue页面之间传递数据的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07

最新评论