在使用 Vue 进行开发时,下拉框值变动事件 @change 是很常用的。

其传参一般分为两种方式:默认传参自定义传参

默认传参

@change 默认会传选中项标识的参数,在传参处不用定义,在方法中直接接受即可。

<template>
<el-select v-model="value" placeholder="请选择" @change="onChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template> <script>
methods: {
onChange(value) {
console.log(value);
}
}
</script>

此时控制台会打印下拉框选中项对应的标识值。

自定义传参

我们经常会遇到需要下拉框传递多个参数的场景,这是需要自定义传参方式。

<template>
<div v-for="(item, index) in otherFeesList" :key="index" class="item">
<el-select v-model="value" placeholder="请选择" @change="onChange($event, index)">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input v-model="item.unit">
</div>
</template> <script>
methods: {
onChange(value, index) {
console.log(value);
console.log(index);
}
}
</script>

此时控制台会分别打印下拉框选中项对应的标识值和外部标签中的序号值。

Vue 下拉框值变动事件传多个参数的更多相关文章

  1. 关于下拉框的onchange事件和onclick选择value值。

    下拉框的onchange事件和onclick,一般最好都选择onchange事件,onclick可能会不兼容有些浏览器. 下面是代码: <!DOCTYPE html><html la ...

  2. LayUI中select下拉框选中触发事件

    代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...

  3. UI自动化之特殊处理二(弹框\下拉框\选项\文件上传)

    弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...

  4. 商品类型的下拉框绑定一个事件,通过ajax获取属性

    html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...

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

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

  6. jquery获得下拉框值的代码

    jquery获得下拉框值的代码   获取Select :  获取select 选中的 text :  $("#ddlRegType").find("option:sele ...

  7. 分公司下拉框赋值-从后台传到前端jsp

    我的旧代码  List<MetaBranchCfg> list = metaBranchCfgBO.queryAllBranchList();  request.setAttribute( ...

  8. vue获取下拉框值

    vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...

  9. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

随机推荐

  1. Hadoop入门学习笔记(二)

    Yarn学习 YARN简介 YARN是一个通用资源管理系统和调度平台,可为上层应用提供统一的资源管理和调度 YARN功能说明 资源管理系统:集群的硬件资源,和程序运行相关,比如内存.CPU等. 调度平 ...

  2. 【Java面试】JVM如何判断一个对象可以被回收

    Hi, 我是Mic. 今天分享一道一线互联网公司必问的面试题. "JVM如何判断一个对象可以被回收" 关于这个问题,来看看普通人和高手的回答. 普通人: 嗯.......... 高 ...

  3. CF335E Counting Skyscrapers 题解

    提供一种最劣解第一且巨大难写的做法( Bob 显然真正的楼量可以达到 \(314!\),是没办法直接做的,再加上唯一方案的样例,可以猜测有简单的结论. 考虑当楼高度为 \(k(k<h)\) 时, ...

  4. 优秀开源平台,前后端分离快速开发平台,一站式多端开发(PC+APP)

    JNPF平台架构介绍 JNPF快速开发平台采用前后端分离技术.采用B/S架构开发,形成一站式开发多端(APP+PC)使用. PC端版本介绍 第一个当然是当下热门的.net core了,运行环境为Vis ...

  5. 软件构造Lab2实验总结

    本次实验训练抽象数据类型(ADT)的设计.规约.测试,并使用面向对象编程(OOP)技术实现ADT.具体来说内容如下: 针对给定的应用问题,从问题描述中识别所需的ADT: 设计ADT规约(pre-con ...

  6. Maven笔记---超详细

    显眼位置标注来源:此文章为B站课程黑马程序员Maven全套教程笔记,由本人整理. Maven简介 Maven的本质是一个项目管理工具,将项目开发和管理过程抽象成一个项目对象模型(POM) POM (P ...

  7. CabloyJS部署了一套演示站点

    为了方便大家快速体验和了解CabloyJS的风格和特性,全新部署了一套演示站点.对于初次接触CabloyJS的开发者,不用下载新建项目,就可以直接体验CabloyJS了 在线演示 场景 链接/二维码 ...

  8. React中http-proxy-middleware代理使用

    React项目npm run start启动本地服务后浏览器访问http://localhost:3000 start命令也可自定义port指定本地运行端口(eg: PORT=3002) 对于单点登录 ...

  9. 批处理(bat、cmd)命令总结

    2021-07-21 初稿 注释与回显 rem 回显 @取消单行回显 rem 注释有三种方式 :: %content% rem rem @取消单行回显,echo off取消后面的回显 @echo of ...

  10. 经典漏洞-后台备份数据库getshell

    由于接触安全时间不多,一些老的getshell方法不是很清楚.这次碰到了个老站,正好学习了一下. 首先这边是用户名可以猜测出来的,因为输入错误的用户名显示用户名不存在,如果存在的话会显示密码错误. 爆 ...