Vue下拉框值变动事件传多个参数方式
更新时间：2024年04月25日 09:01:03 作者：天航星
这篇文章主要介绍了Vue下拉框值变动事件传多个参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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中用H5实现文件上传的方法实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了vue3中如何使用dayjs问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在现代前端开发中,Markdown作为一种轻量级的文本标记语言,越来越受到开发者和内容创作者的青睐,本文我们就来使用Vue.js构建一个简单的Markdown编辑器吧2025-02-02
本文主要介绍了element select实现组件虚拟滚动优化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
今天小编就为大家分享一篇vue中在vuex的actions中请求数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要给大家介绍了关于Vue获取表单数据的多种方式,在Vue中我们通常使用v-model命令绑定表单的属性值(通常是value),获取到的属性值就是表单数据,需要的朋友可以参考下2023-09-09
Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件，无需离开界面，也无需使用嵌入，这篇文章主要介绍了Vue中使用Printjs插件实现打印功能,需要的朋友可以参考下2022-08-08
今天小编就为大家分享一篇关于Vue核心概念Getter的使用方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,这篇文章主要给大家介绍了关于如何利用Vue+intro.js实现页面新手引导流程功能的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了如何使用vue实现带缩略图的轮播图效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的可以参考下2024-02-02
最新评论