vue操作select获取option值

如何实时的获取你选中的值 只用@change件事
@change="changeProduct($event)" 动态传递参数
vue操作select获取option的ID值

 

如果select的v-model(value)与option绑定的value值一致。
那么就会显示option中的值 {{item.title}}-->

<div id="app">
       <select  class="fl" v-model="ProductActive"  @change="changeProduct($event)" >
            <option v-for="(item,index) in productList" :key="index" :value='item.id'>{{item.title}}</option>  
       </select>  
  </div>
复制代码
data:{
        productList:[{id:1,title:"北京"},{id:2,title:"上海"},{id:3,title:"广州"},{id:4,title:"四川"}],
        ProductActive:"1",//获取被选中的value值 默认选中的是1(北京)
     },
                
  methods: {
           changeProduct(event) {
             this.ProductActive = event.target.value; //获取option对应的value值
             console.log("你选中了",this.ProductActive)
           },
       }
复制代码

 

 

posted @   南风晚来晚相识  阅读(40343)  评论(0编辑  收藏  举报
编辑推荐:
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
阅读排行:
· Blazor Hybrid适配到HarmonyOS系统
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· 解决跨域问题的这6种方案,真香!
· 分享4款.NET开源、免费、实用的商城系统
· 一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库
点击右上角即可分享
微信分享提示