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

最新推荐文章于 2024-07-08 11:16:05 发布
最新推荐文章于 2024-07-08 11:16:05 发布
阅读量8.9k 收藏 23
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vanllen_moon/article/details/115599713
版权
本文介绍了在Vue中如何获取下拉框选中的value和label值。通过`:value`与`v-model`的绑定，可以方便地获取到选中的value值，例如`this.paneOneForm.villageId`。同时，利用数组的`find`方法，可以得到选中的文本值（label值），例如`paneOneForm.villageName`。示例中，数据源是一个包含id和name属性的对象数组。
摘要由CSDN通过智能技术生成

前提：
使用v-for循环渲染选择项，如下图例子
例子中allVillage为数组，每个数组元素是对象，对象中含有id和name
例子

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

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

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

let obj = {
   }
obj = this.allVillage.find
最低0.47元/天 解锁文章
Vanllen_moon
关注
  • 3
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue下拉框 获取选中的值
weixin_42327537的博客
10-24 7573
<template> <div> <!-- 下拉框获取value值 --> <el-select v-model="query" @change="selectChanged"> <el-option v-for="item in options" :key="item.value" :value="item" :label="item.label"></el-option&gt
vue select 获取value和lable操作
01-21
vue select控件在选择时需要把id和name两个值都获取到，实现方案如下： select控件代码 <FormItem label=物资类型： prop=supplyType> <Select v-model=detailData.supplyType :label-in-value=true placeholder=请选择物资类型 @on-change=getVendorId> <Option v-for=item in supplyTypeList :value=item.id :key=item.id :labl
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
最新发布
qq_45831414的博客
07-08 486
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
vue拿到下拉框el-select的选择项的value和label
weixin_53339757的博客
06-28 4780
vue实现同时拿到下拉框的值和名称
Vue获取下拉框中的值
光头强的博客
01-19 1万+
一、获取含有默认省的下拉框中的name值 &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;script src
vue 获取下拉框选中的值
Liber_Y的博客
05-17 4426
<template> <div class=""> <select @change="getEventType($event)"> <option v-for="option in list" :key="option.value" :id="option.value" :name="option.name" > </option>
vue获取下拉框值
weixin_30708329的博客
08-01 7710
vue获取下拉框的值，用vue-modle,只有点击下拉框的值才会赋值到下拉框中，初始时下拉框没有数据，而改用$event就不会出现这样的问题，下面看代码以及图解： v-model解决方式： <!-- 下拉框 --> <div v-show="moreStore" class="select"> 　　<select class="choice" v-on:ch...
vue项目获取下拉框选中id_在Vue 中获取下拉框的文本及选项值操作
weixin_39740737的博客
12-18 1950
方法1：:model="ruleForm"label-position="right"ref="ruleForm" // 被ref 标记的status-iconsize="small"inline:rules="rules"label-width="150px"class="demo-ruleForm">:options="productsDataOptions"v-model="rule...
Vue 中获取下拉框的文本及选项值
热门推荐
andy5520的博客
05-30 2万+
方法1： <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="d...
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
10-14
1. `v-model`：这是Vue.js中的双向数据绑定，用于设置和获取Treeselect组件的当前选中值。在这个例子中，我们将其绑定为`DRHA_EFaultModeTree_value`，它会存储选中节点的ids。 2. `:options`：这是一个包含所有可...
在Vue 中获取下拉框的文本及选项值操作
01-19
方法1： <!-- element表单组件 --> <!-- <el-input v-model.number=rul
vue 实现表单下拉框 --- 并且获取其中的值
北芒的博客
06-18 3647
说明 使用到了 v-model 指令 开始使用 获取下拉表单中的值 原理就是直接绑定 type 里面的值利用双向绑定的原理实现 <div id="app"> <select v-model="type"> //框里面的值会随着 type 值的变化而变化（关键） <option value="1">一---1</option> <option value.
vue中使用@change获取select下拉框选中的值
aws_lawsl的博客
05-21 1万+
vue中使用@change获取select下拉框选中的值 很多刚入门vue的朋友在开发中使用vue无法获取select下拉框中选中的option的value，在网上查了很多也没有发现有效的解决办法，经过一番尝试，终于解决了这个问题，废话不说，上代码！ 总结： 使用$event.target获取事件触发的目标。并获取option的value值。 ...
Vue怎么获取当前选中的select下拉框的value值
码无止境的博客
11-07 1万+
直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue怎么获取当前选中的select下拉框的value值</title> <!--引用Vue在线文件--> <script src="https://cdn...
Vue 下拉框获取数据
Mr_aswl的博客
09-09 6485
Vue 使用数据网上很多方法都需要使用到路由器 但是我不太会，于是自己写了一个小组件也可以起到获取数据库数据并返回到 Vue 下拉框的作用 <template> <div class="demo"> <el-select v-model="queryParams" @change="selectPlatform($event)"> <el-option v-for="(item,index) in timeList" :key="ind
vue项目获取下拉框选中id_vue操作下拉选择器获取选择的数据的id方法
weixin_39974811的博客
12-18 553
实际项目中我们获取选择的数据的id；这时候 需要配合使用v-bind，才能获取到选择的那条数据的id值，其实就是id赋值给value属性{{ a.name }}您选择的名字的Id是：{{select}}js代码export default {data(){return{select:'',arr:[{id:'1',name:'html'},{id:'2',name:'css'},{id:'3',n...
VUE下拉框获取value值
weixin_41331190的博客
07-31 1027
获取下拉框的文本值和value值
aeh36384的博客
01-12 742
http://www.cnblogs.com/djgs/p/3691979.html?utm_source=tuicool&utm_medium=referral 现在有一个Id为AreaId的下拉框，要获取它当前选择项的文本和值有以下方法： <span class="red">* </span> 地&nbsp;&nbs...
vue下拉框获取选中值的所有信息
04-22
你可以使用v-model指令将下拉框与选中值绑定，然后通过事件监听获取选中值的相关信息。例如： ``` <template> <div> <select v-model="selectedOption" @change="getSelectedOptionInfo"> <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option> </select> </div> </template> <script> export default { data() { return { selectedOption: '', options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, ], }; }, methods: { getSelectedOptionInfo() { const selectedOptionValue = this.selectedOption; const selectedOptionLabel = this.options.find((option) => option.value === selectedOptionValue).label; console.log(`选中的值为：${selectedOptionValue}，选中的选项为：${selectedOptionLabel}`); }, }, }; </script> ``` 在上面的代码中，我们先将下拉框与选中值绑定到`selectedOption`属性上，然后在`<select>`标签上监听`change`事件，调用`getSelectedOptionInfo()`方法获取选中值的相关信息。在`getSelectedOptionInfo()`方法中，我们首先获取选中的值，然后通过`Array.prototype.find()`方法在选项数组中查找选中值对应的选项，从而获取选中选项的`label`属性。最后将选中值和选项的`label`打印出来。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值