如何实时的获取你选中的值 只用@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. 一行代码在Linux服务器上搭建基于.Net Core的博客

    如果你有一台Linux服务器(CentOS7+ 或者 Ubuntu 16.04+)可以使用以下命令快速搭建一个博客. curl http://cdn.zkeasoft.com/zkeacms-blog ...

  2. MySQL 57安装部署(Zip版)(Windows版)

    1. 在<MYSQL>的根目录下新建一个my.ini写入以下内容 [mysqld] port = 3306 basedir=D:\mysql\mysql-5.7.22-winx64 # M ...

  3. Python 对列表嵌套的数据进行排序

    利用sorted(iterable[, key][, reverse]) key:指定一个接收一个参数的函数,这个函数用于从每个元素中提取一个用于比较的关键字,默认值为None(直接比较元素) rev ...

  4. Ubuntu 18.04 安装 pip3

    Ubuntu 18.04 默认安装了 python2.x 和 python3.x:默认情况下 python 指的是 python2.x,如果要使用 python3.x 需要使用 python3,如: ...

  5. WINDOWS代理服务器搭建 - Apache httpd

    1.检查电脑系统类型 检查电脑版本是为 32位操作系统 还是 64位操作系统 2.下载安装Apache Httpd 下载地址:https://www.apachehaus.com/cgi-bin/do ...

  6. ubuntu升级pip报cannot import name 'main'解决方法

    执行sudo vi /usr/bin/pip 将代码: from pip import main if __name__ == '__main__': sys.exit(main()) 修改为: fr ...

  7. navicat连接mysql报错1251解决方案,从头搭建node + mysql 8.0 (本人亲测有效)

    准备学node 好久了 一直没有动手去写,今天突发奇想,然后就安装了一个mysql (找了一个博客跟着步骤去安装的),然后打算用node 写个增删改查. 1.下载mysql安装包   地址: http ...

  8. Python开发GUI实战:图片转换素描画工具!

    奋斗没有终点 好好学习72变,因为将来 没有人能替你阻挡81难 . 生如蝼蚁,当有鸿鹄之志: 命如纸薄,应有不屈之心 . ​ 今天被这句话触动了,所以开篇分享给大家.鸡汤有毒,但有时大家却靠它激励自己 ...

  9. Oracle讨论Java 13版本

    JDK 13提高了应用程序性能,添加了两种语言功能预览,以及更多JDK 13  根据Oracle Java Team的说法,JDK 13致力于通过提高Java SE平台和JDK的性能,稳定性和安全性来 ...

  10. spring cloud 2.x版本 Gateway路由网关教程

    前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 本文基于前两篇文章eureka-server.eureka-client.eureka ...