如何实时的获取你选中的值 只用@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)
},
}

vue操作select获取option值的更多相关文章

  1. JS实现选择不同select标签option值的验证

    js实现不同select标签option值的验证 功能描述: 选择中文时,匹配中文的正则表达式,选择英文选项是匹配英文的表达式,并且有对应的提示信息. html代码片段: <select id= ...

  2. js 操作select和option

    js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x(&qu ...

  3. Js操作Select大全(取值、设置选中)

    Js操作Select是很常见的,也是比较实用的. jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<s ...

  4. JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值

    //**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...

  5. Js操作Select大全(取值、设置选中等等)

    jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selecto ...

  6. js如何获取到select的option值???

    1.获得选项option的值 var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIn ...

  7. select 获取option中其他的属性的值

    <select name="tag_keys[]" id="category_type" required> <option value=&q ...

  8. 获取select的option值

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. js 操作select和option常用代码整理

    1.获取选中select的value和text,html代码如下: <select id="mySelect"> <option value="1&qu ...

随机推荐

  1. C#&.Net干货分享-构建后台自动定时任务的源码

    1.创建一个自动处理中心任务参数的类,直接源码: namespace Frame.AutoProcess{    /// <summary>    /// 委托(用于异步处理任务)    ...

  2. OSPF与ACL综合实验

    OSPF与ACL综合实验 1.实验内容 (1)企业内网运行OSPF路由协议,区域规划如拓扑图所示(见3.实验拓扑图): (2)财务和研发所在的区域不受其他区域链路不稳定性影响: (3)R1.R2.R3 ...

  3. WPF 精修篇 DataGrid 筛选

    原文:WPF 精修篇 DataGrid 筛选 DataGrid也可以分组 但是用的地方不多 就没写 筛选还是可以的 比如Datagrid数据量比较大 要做数据筛选 贴码 <DataGrid x: ...

  4. typescript里一些有趣的点

    联合类型 在原生的JS里,null和undefined经常会导致BUG的产生, 在ts里,你又想用null,又担心出错的时候 你可以考虑用联合类型,当某值可能为 number或null,你可以声明它的 ...

  5. 读懂在单台机器上创建RabbitMQ集群

    在优锐课java中了解有关在单台计算机上安装集群以及如何向集群添加更多节点的更多信息,码了很多专业的相关知识, 分享给大家参考学习. 如果你在单台计算机上设置群集时遇到问题,那么以下文章可能会帮助回答 ...

  6. python3中的数字类型

    今天在学校机房刷python题时发现自己对python中的数字类型不理解,回寝室后百度一下. 现在做一个总结. python中的数字类型有: 整数,布尔值,复数,科学计数法,浮点数 1,整数,大小没有 ...

  7. Bag of Tricks for Image Classification with Convolutional Neural Networks

    url: https://arxiv.org/abs/1812.01187 year: 2018 文中介绍了训练网络的一些 tricks, 通过组合训练过程的trick,来提高模型性能和泛化能力,以及 ...

  8. RadioButtonList

    RadioButtonList <asp:Label ID="txt_Gender" runat="server" Text="性别" ...

  9. sql server 列字段拼接 —— STUFF

    原始数据: sql语句 SELECT DISTINCT l.family_id, )) ,,'' ) isc_id FROM dbo.Addresses l 结果数据:

  10. 2-How nginx processes a request

    原文:http://nginx.org/en/docs/http/request_processing.html server_name directive 参考:http://nginx.org/e ...