如何实时的获取你选中的值 只用@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. Mysql存储过程--大于十分钟执行

    --存储过程 DELIMITER | DROP PROCEDURE IF EXISTS update_tatus | CREATE PROCEDURE update_status() BEGIN mi ...

  2. Shell—各种括号的用法

    括号的种类 小括号,圆括号 ( ) 中括号,方括号 [ ] 大括号.花括号 { } 一.单小括号 () 1.另开命令组——小括号中的命令将会新开启一个子shell独立顺序运行,所以括号中的变量不能够被 ...

  3. Codeforces Round #584

    传送门 A. Paint the Numbers 签到. Code #include <bits/stdc++.h> using namespace std; typedef long l ...

  4. EOJ Monthly 2019.11 E. 数学题(莫比乌斯反演+杜教筛+拉格朗日插值)

    传送门 题意: 统计\(k\)元组个数\((a_1,a_2,\cdots,a_n),1\leq a_i\leq n\)使得\(gcd(a_1,a_2,\cdots,a_k,n)=1\). 定义\(f( ...

  5. 原生JS无缝轮播图

    (1)原理介绍 (2)静态布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  6. TeamyinyinFish-凡事遇则立

    小组github地址: https://github.com/TeamyinyinFish 1.项目的总结反思 阿尔法迭代的时候我们只是理想的随意的选择了一个项目并且认为非常简单. 在第二轮迭代的时候 ...

  7. np.unique( )的用法

    该函数是去除数组中的重复数字,并进行排序之后输出. 换句话,我想从一个图片选取 1000个不同的点,随机采点经常遇到相同的点,造成重复.np.unique就是用来解决这个问题

  8. 题解:A

    A (a.pas/c/cpp) [题目描述] 对于给定的一个正整数n, 判断n是否能分成若干个正整数之和 (可以重复) , 其中每个正整数都能表示成两个质数乘积. [输入描述] 第一行一个正整数 q, ...

  9. R的环境系统

      r环境概念 环境:用来具体存储对象的地方. 规则1:每一个对象都存储在一个环境当中. 规则2:每一个环境都与一个父环境相连接,构成一个分层的环境系统. 规则3:子环境与父环境的连接是单向的. pa ...

  10. golang数据结构之双链表

    目录结构: doubleLink.go package link import ( "fmt" ) //HerosNode 链表节点 type HerosNode struct { ...