vue获取select的opion值（@change）

路小雨.

于 2020-07-22 13:50:34 发布

阅读量8k

点赞数 1

分类专栏： vue 文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_44893380/article/details/107511785

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue.js中如何通过@change事件监听select的选择变化，动态传递参数并获取option的ID值。当select的v-model与option的value绑定一致时，将显示option的title。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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-model="q.CityByID">
           <option v-for="(item,index) in City" :key="index" :value='item.id'>{{item.name}}</option>
            </select>
  </div>

  data:{
        City:[{id:1,title:"北京"},{id:2,title:"上海"},{id:3,title:"广州"},{id:4,title:"四川"}],
        ProductActive:null,
     },
                
  methods: {
           changeProduct(event) {
             this.ProductActive = event.target.value; //获取option对应的value值
           },
       }