vue 获取select的选中对象值

最新推荐文章于 2023-04-11 17:15:11 发布
最新推荐文章于 2023-04-11 17:15:11 发布
阅读量6.8k 收藏 8
点赞数
原文链接：https://cn.vuejs.org/v2/guide/forms.html#%E9%80%89%E6%8B%A9%E6%A1%86
版权

vue 官网：https://cn.vuejs.org/v2/guide/forms.html#%E9%80%89%E6%8B%A9%E6%A1%86

 

思路：通过下标值来获取 对象的值

代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取数据</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <h2>
            请选择你喜欢水果ID
        </h2>
        <select v-model="seleced">
            <option v-for="(item, key) in optionArr" :value="key">
                {{ item.label }}
            </option>
        </select>
        <h3>
            <!-- 想要显示、请求label、id、en都任意 -->
            {{ optionArr[seleced]['id'] }}
        </h3>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                optionArr: [
                    {label: "苹果", id: 2, en: "appe", price: "10块"},
                    {label: "雪梨", id: 22, en: "pear", price: "2块"},
                    {label: "西瓜", id: 222, en: "watermelon", price: "5块"},
                    {label: "葡萄", id: 2222, en: "grape", price: "8块"},
                    {label: "樱桃", id: 'yingTao', en: "Cherry", price: "6块"},
                ],
                seleced: 3 // 选中的数组下标，用于指向数组中，选中的对象位置
            }
        },
        watch: {
            seleced(newVal, oldVal) {
                console.log('你选中的对象数据为：')
                console.log( this.optionArr[newVal] )
            }
        }
    });
</script>
</html>

 

Alice9969
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 获取select选中的option的所有值
MtangEr的博客
08-13 9167
<select v-model='privinceCode' @change="chooseProcive($event)"> <option :value ="item.code" v-for="(item,index) in proviceList" :key="index">{{item.name}}</option> </select> <select v-model='cityCode' @change="chooseCity($event
vue复制html表格单列,vue表格含有一列多选框，如何获取被选中的行的数据？
weixin_42500642的博客
06-26 1724
1.仿照element-ui官网贴出的demo，table表格多选，选择多行数据时使用 Checkbox。但是无法获取this.multipleSelection的值。相关代码如下：男女个人团队电话: {{ scope.row.stel }}邮箱: {{ scope.row.smail }}地址: {{ scope.row.sadd }}{{ scope.row.stel }}个人描述: {{ s...
vue、js onSelect事件 获取选中的值
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-26 5642
onselect属性可用于,,,,和.主要是借用event获取其值和selectionStart选中下标起始selectionEnd选中的下标结束。然后字符串截取出来。作用当文本被选中时，执行一段Javascript代码。onselect事件会在文本框中的文本被选中时发生。 vue、js onSelect事件 获取选中的值......
vue获取select的opion值（@change）
weixin_44893380的博客
07-22 7794
vue操作select获取option值 在这里插入代码片用@change件事 @change=“changeProduct($event)” 动态传递参数 vue操作select获取option的ID值 如果select的v-model（value）与option绑定的value值一致。 那么就会显示option中的值 {{item.title}}–> <div id="app"> <select @change="QhCityByID($event)" v-mod
vue select标签获取选中option的所有值
wgpswf222的博客
12-09 4739
最近在熟悉vue,学到了v-model标签，想把v-model标签用到select标签上，进行双向绑定，发现v-model只能绑定到select的值，如果我想获取到选中option的显示的内容，怎么办呢？于是有了本片博文，详细代码如下： body里面没有使用v-model标签，如果用v-model标签，data里面就要多声明一个变量，change事件通过e.targe...
ant design vue a-select 获取下拉菜单选中的option对象
weixin_42634991的博客
01-11 4014
a-select 获取下拉菜单选中的option对象或者option的指定属性值
解决vue select当前value没有更新到vue对象属性的问题
12-09
本文主要讨论了一个与Vue中的`select`元素相关的坑：当一个`select`元素的值发生变化时，该变化并未同步更新到Vue对象的属性。 问题描述如下：在应用中有两个`select`元素，其中一个的选择会动态改变另一个`select`...
vue select 获取value和lable操作
10-14
本文将详细介绍如何在Vue中使用`<Select>`组件来获取选定选项的`value`（值）和`label`（标签文本）。在实际应用中，我们可能需要同时获取选项的唯一标识（例如ID）和其对应的描述（例如名称），以便于后续的数据...
element-ui 关于获取select 的label值方法
10-18
本文将详细讲解如何在Element UI中获取`el-select`组件选中的`label`值，以及如何同时获取`value`和`label`的值。 1. 获取`el-select`的`label`值： 在Element UI中，`el-select`的`v-model`绑定的是选中项的`value...
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
10-14
在本文中，我们将深入探讨如何在Vue Treeselect中获取选中节点的ids和labels，这对于实现动态数据交互和展示用户选择至关重要。 首先，我们要了解Vue Treeselect提供的几个关键属性和事件： 1. `v-model`：这是Vue...
vue treeselect获取当前选中项的label实例
10-14
主要介绍了vue treeselect获取当前选中项的label实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-select获取选中的label值.pdf
12-16
从提供的信息来看，这里介绍的是如何在不通过循环遍历选项的情况下，直接获取`el-select`组件选中项的`label`值。 首先，`el-select`组件允许我们绑定一个数组作为其选项，每个选项通常包含`value`和`label`两个...
antDesign-vue select :value 不支持传入对象，但选择的时候想获取当前选中的整条数据
qq_42180156的博客
04-30 1963
//流程配置选择表单编码 handlecodechange(item){ this.config.processcode = item this.currentcodelist=this.codeList[item] console.log(this.codeList[item]) // this.currentformCode=e.key }, 根据下标来去codeList里面找 codeList 就是整个接口请...
Vue+Element+Select获取选中的对象
weixin_34111819的博客
03-20 4011
案例演示：获取select当前选中的所有内容 1 <el-select v-model="value8" filterable placeholder="请选择" value-key="id" @change="currentSel"> 2 <el-option v-for="item in options" :...
vue 下拉框选择获取对应值的整个数据
HouMengFei_的博客
04-11 2393
find函数是用于在数组中查询对象的功能，该函数是用于在数组中查找一个满足制定条件的一个对象，如果没有则返回undefined。使用find函数来进行对应id数据的查找。
vue下拉框 获取选中的值
weixin_42327537的博客
10-24 7483
<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
获取select组件当前选中项所有内容（vue+layui）
欢迎来到快乐星球
02-11 3609
<el-form-item label="分支机构：" style="width: 50%;"> <el-select clearable filterable class="ele-block" v-model="form.BRANCH_ID" placeholder="请选择" style="width: 350px;" @chan
vue+element-ui获取select的label
weixin_36706903的博客
08-15 9809
页面展示：   &lt;template&gt; &lt;el-select v-model="select_PackingPrice" clearable placeholder="请选择价格" @change="changePriceValue"&gt; &lt;el-option v-for="item in opti.
vue获取select选中的option
最新发布
06-28
### 回答1： 可以通过v-model指令来绑定select元素的选中值，例如： ``` <template> <div> <select v-model="selected"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <button @click="showSelected">显示选中值</button> </div> </template> <script> export default { data() { return { selected: '' // 默认选中值为空 } }, methods: { showSelected() { console.log(this.selected) // 输出选中的值 } } } </script> ``` 在上面的代码中，我们通过v-model指令将select元素的选中值绑定到了组件的data属性中的selected变量上。当用户选择了某个选项时，selected变量的值会自动更新。我们可以通过showSelected方法来获取选中的值并进行处理。 ### 回答2： 在Vue中获取select选中的option有多种方法，这里介绍两种比较简单的方法。 第一种方法是使用v-model指令，将select的选中项绑定到Vue组件中的一个变量上。具体来说，在select标签中添加v-model属性，同时在Vue组件中定义一个与v-model属性相同的变量。 例如，如果我们有一个select标签如下： ```html <select v-model="selectedOption"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> ``` 那么在Vue组件中可以这样定义一个名为selectedOption的data属性： ```js data() { return { selectedOption: '' } } ``` 此时，selectedOption的值会随着用户在select中选中的项而改变。 第二种方法是通过事件监听来获取select的选中项。具体来说，可以在select标签上添加change事件监听器，在事件处理函数中获取当前选中的option的value值。 例如，我们有一个select标签如下： ```html <select @change="handleChange"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> ``` 那么在Vue组件中定义一个名为handleChange的函数，用来处理select的change事件： ```js methods: { handleChange(event) { const selectedOption = event.target.value // do something with selectedOption } } ``` 在handleChange函数中，可以通过event.target.value来获取当前选中的option的value值。 以上两种方法都可以获取select选中的option，具体选择哪种取决于实际需求。V-model更加简单直接，而事件监听更加灵活可定制。 ### 回答3： 在Vue中获取Select选中的Option有多种方式。 1.使用v-model指令 通过在select标签中使用v-model指令可以实现双向数据绑定。那么在vue组件中，在data中定义一个变量，通过v-model指令使select选中的option的value值绑定到这个变量上。这样select选中的option的值就可以在组件的其他地方使用了。 2.使用ref属性 在select标签加上ref属性，并在Vue组件中通过this.$refs获取对应的DOM元素。可以通过获取这个DOM元素的value属性获取当前选中的option的value值。如下面的代码所示： ``` <template> <div> <select ref="mySelect"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> </select> <button @click="getValue">获取选中的Option</button> </div> </template> <script> export default { methods: { getValue() { const value = this.$refs.mySelect.value; console.log(value); }, } } </script> ``` 3.监听change事件 在select标签中添加change事件监听函数。当选中的option值发生变化时，这个函数会被自动调用，并传入一个event对象。通过这个event对象的target属性，可以获取到当前选中的option标签，从而获取到对应的value值。如下面的代码所示： ``` <template> <div> <select @change="onChange"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> </select> </div> </template> <script> export default { methods: { onChange(event) { const value = event.target.value; console.log(value); }, } } </script> ``` 以上三种方法可以在Vue中获取select选中的option。具体使用哪种方法可以根据项目需求来选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值