vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解:
v-model解决方式:
<!-- 下拉框 -->
<div v-show="moreStore" class="select">
  <select class="choice" v-on:change="indexSelect" v-model="indexId">
    <option v-for="item in index" v-bind:value="item.indexId">{{item.name}}</option>
  </select>
</div>
下拉框的值:
index: [{
  "indexId":1,
  "name": "点菜用户数"
  }, {
  "indexId":2,
  "name": "点菜新用户数"
  }, {
  "indexId":3,
  "name": "首次留联系方式人数"
  }, {
  "indexId":4,
  "name": "已有联系方式人数"
}]
 
在这里,indexId要在data里面声明一下
事件:
// 获取id值
indexSelect(){
  console.log(this.indexId);//在这里可以正确输出每个下拉框对应的下标值,当然输出值都是可以的
}
 
改用$event的解决方式
<!-- 下拉框 -->
<div v-show="moreStore" class="select">
  <select class="choice" v-on:change="indexSelect($event)">
    <option v-for="item in index" v-bind:value="item.indexId">{{item.name}}</option>
  </select>
</div>
 
事件:
// 获取value值
indexSelect(event){
  console.log(event.target.value);
},
图示:
 
 
当然,可以根据自己的项目需要来选择哪种方法。在这里,v-on:change也可以写成v-on:click

vue获取下拉框值的更多相关文章

  1. jquery 获取下拉框值与select text

    下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...

  2. vue获取下拉框select的值

    1.我写的是循环遍历,然后获取id :value="v.id"这就是获取的id然后打印就可以获取id了

  3. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

  4. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  5. Java-Selenium,获取下拉框中的每个选项的值,并随机选择某个选项

    今天逛51testing,看见有人问这个问题.现在以Select标签为例. 1.首先看页面中的下拉框,如图: 2.F12查看页面源代码,如下 <select class="form-c ...

  6. select获取下拉框的值 下拉框默认选中

    本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值 例如:  <select class="form-control" id=" ...

  7. 用js 实现代码获取下拉框的value值

    var rtl=document.getElementById("selpartyorg"); //获取下拉框对象 var id=rtl.options[rtl.selectedI ...

  8. Vue 下拉框值变动事件传多个参数

    在使用 Vue 进行开发时,下拉框值变动事件 @change 是很常用的. 其传参一般分为两种方式:默认传参和自定义传参. 默认传参 @change 默认会传选中项标识的参数,在传参处不用定义,在方法 ...

  9. jsp获取下拉框组件的值

    jsp获取下拉框组件的值 1.首先,写一个带有下拉框的前台页 1 <%@ page language="java" contentType="text/html; ...

随机推荐

  1. JavaScript函数认识,Js中的常见函数

    JavaScript函数: 也称为方法,用来存储一块代码,需要的时候调用. 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数需要包含四要素:返回类型,函数名,参数列表,函数体 拓展: ...

  2. SQL之trigger(触发器)

    先来看一小段程序 有如下三张表: 帐户(编号,姓名,余额,建立日期,储蓄所编号) 储蓄所(编号,名称,地址,人数,所属城市) 借贷(帐户,借贷类型,金额,日期) create trigger tri_ ...

  3. 不再迷惑,无值和NULL值的转换

    在关系型数据库的世界中,无值和NULL值的区别是什么?一直被这个问题困扰着,甚至在写TSQL脚本时,心有戚戚焉,害怕因为自己的一知半解,挖了坑,贻害后来人,于是,本着上下求索,不达通幽不罢休的决心(开 ...

  4. WCF入门的了解准备工作

    了解WCF, 及WCF入门需要掌握哪里基本概念? 1.准备工作 >1.1 . XML >1.2 . Web Service >1.3 . 远程处理 (RPC) >1.4.  消 ...

  5. word和.txt文件转html 及pdf文件, 使用poi jsoup itext心得

    word和.txt文件转html 及pdf文件, 使用poi jsoup  itext心得本人第一次写博客,有上面不足的或者需要改正的希望大家指出来,一起学习交流讨论.由于在项目中遇到了这一个问题,在 ...

  6. Python的多线程编程

    提到多线程,很多人就会望而却步,本文将由浅入深地带你攻克python多线程编程,并防止你跳入深坑, 首先看一段简单的代码: from time import ctime,sleep def play_ ...

  7. linux 系统中的 /bin /sbin /usr/bin /usr/sbin /usr/local/bin /usr/local/sbin 目录的区别

    先来段英文的: /bin This directory contains executable programs which are needed in single user mode and to ...

  8. 7.java的请求转发和请求重定向

    1.请求重定向:是客户端的行为,response.sendRedirect(),从本质上讲等同于两次请求,前一次的请求对象不会保存,地址栏的URL地址会改变,一次新的转发. 2.请求转发:是服务器的行 ...

  9. jQery的链式操作和商城简易导航栏

    今天要记录的是jq的一些简单操作.项目的需求是做一个导航栏,单机不同的商品名称链接,显示相应的内容.用js来写的话相对代码量要多一些,选择jqrey一行则可以搞定,下面呢是我的代码和效果图 这个是初始 ...

  10. ES语法注意事项

    在函数内部定义全局变量:举个栗子 function fn(){ var str = "hezhi"; } -alert(str) //=>fn不执行的 =>str is ...