Vue 下拉框值变动事件传多个参数
在使用 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 下拉框值变动事件传多个参数的更多相关文章
- 关于下拉框的onchange事件和onclick选择value值。
下拉框的onchange事件和onclick,一般最好都选择onchange事件,onclick可能会不兼容有些浏览器. 下面是代码: <!DOCTYPE html><html la ...
- LayUI中select下拉框选中触发事件
代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...
- UI自动化之特殊处理二(弹框\下拉框\选项\文件上传)
弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...
- 商品类型的下拉框绑定一个事件,通过ajax获取属性
html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
- jquery获得下拉框值的代码
jquery获得下拉框值的代码 获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:sele ...
- 分公司下拉框赋值-从后台传到前端jsp
我的旧代码 List<MetaBranchCfg> list = metaBranchCfgBO.queryAllBranchList(); request.setAttribute( ...
- vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...
- select下拉框选择触发事件
我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...
随机推荐
- IOU->GIOU->CIOU->Focal_loss
IOU->GIOU->CIOU->Focal_loss 参考b站 总览 2022-1-3号补充 该链接下关于算是函数讨论 https://zhuanlan.zhihu.com/p/1 ...
- Mac下最好用的SSH连接客户端 (Termius)
Termius是微软的一款SSH终端工具,它支持多平台.而且操作界面十分ha好看且简洁,今天分享给大家️ 软件下载 关注下方公众号,回复termius获取下载地址 软件功能介绍 Termius M ...
- 【原创】渗透神器CoblatStrike实践(1)
渗透神器CoblatStrike实践(1) 前言 正常的渗透测试: 寻找漏洞,利用漏洞,拿到一定的权限 后渗透(CS为代表的): 提升权限,内网渗透,权限维持 工具地址(非官方取到后门多,建议 ...
- CSS(九):background(背景属性)
通过CSS背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图像固定等. background-color(背景颜色) background-color属性定义 ...
- 10.Linux防火墙iptables之SNAT与DNAT
Linux防火墙iptables之SNAT与DNAT 目录 Linux防火墙iptables之SNAT与DNAT SNAT策略及应用 SNAT策略概述 SNAT策略典型应用环境 SNAT策略原理 SN ...
- Javaweb-pom文件
pom.xml是maven的核心配置文件 <?xml version="1.0" encoding="UTF-8"?> <!--maven版本 ...
- 基于SqlSugar的开发框架循序渐进介绍(9)-- 结合Winform控件实现字段的权限控制
字段的权限控制,一般就是控制对应角色人员对某个业务对象的一些敏感字段的可访问性:包括可见.可编辑性等处理.本篇随笔结合基于SqlSugar的开发框架进行的字段控制管理介绍. 在设计字段权限的时候,我们 ...
- node zlib压缩模块了解一下
压缩: 从index.html压缩成index.html.gz const zlib = require('zlib'); const gzip = zlib.createGzip();const f ...
- 设计模式-策略模式前端应用校验vue写法
1.定义:定义一系列算法,把它们一个个封装起来,并且它们可以相互替换 2.实际应用:减少if else的使用,在有多种算法相似的情况下,使用 if-else 所带来的复杂和难以维护,提高维护和可读性, ...
- Day05 表格
表格 <table width="300" border="1" cellspacing="0"> <caption> ...