如何实时的获取你选中的值 只用@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. 37-Data Volume 之 bind mount

    storage driver 和 data volume 是容器存放数据的两种方式,上一节我们学习了 storage driver,本节开始讨论 Data Volume. Data Volume 本质 ...

  2. 当您解开后您从 Internet 上下载的压缩的文件时,文件的修改日期更改为您提取它的日期

    用鼠标右键单击该压缩的文件,然后单击属性. 单击常规选项卡,请单击取消阻止,然后单击确定. 从压缩文件中提取文件.

  3. fastadmin安装定时插件报错 ZipArchive::extractTo(): Permission denied

    环境linux上直接安装  如果你是在win开发号直接部署的应该是没问题  我是直接在linux安装的 这几天研了下fastadmin 想用他的定时可是在使用的时候报错   ZipArchive::e ...

  4. 自己用到的解决Python3.6.5+Django2.0集成xadmin后台点击添加或者内容详情报 list index out of range 的错误的办法如下:

    Python3.6.5 Django2.0 这是Django版本与xadmin兼容的问题 解决办法如下: 注释掉如下代码: def render(self, name, value, attrs=No ...

  5. django升级2.1python升级3.7时出现的错误:"trying to load '%s': %s" % (entry[1], e) django.template.library.InvalidTemplateLibrary:

    django升级2.1python升级3.7时出现如下的错误: "trying to load '%s': %s" % (entry[1], e) django.template. ...

  6. The 2017 ACM-ICPC Asia Beijing Regional Contest

    传送门 C - Graph 题意: 给出一个\(n\)个点\(m\)条边的无向图.现在有多组询问,每组询问给出区间\([l,r]\),问区间\([l,r]\)中有多少点对是连通的. 思路: 若考虑只有 ...

  7. vue项目中引入特殊字体

    特殊字体指的是默认电脑中没有的 1.下载字体 2.新建文件夹font,把字体放进去 3.新建font.css 4.使用@font-face设置字体 @font-face { font-family: ...

  8. http返回头中content-length与Transfer-Encoding: chunked的问题释疑

    先说说问题出现的背景:        公司服务器与手机客户端交互,客户端请求一个动态生成的XML文件,在用firebug查看http响应头的时候,有时候发现有content-length属性,有时候没 ...

  9. python爬虫之csv文件

     一.二维数据写入csv文件 题目要求: 读入price2016.csv文件,将其中的数据读出,将数字部分计算百分比后输出到price2016out.csv文件中 知识点: 对于列表中存储的二维数据, ...

  10. Hibernate 知识收纳.

     一.乐观锁和悲观锁 悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿 ...