Vue下拉框值變動(dòng)事件傳多個(gè)參數(shù)方式
Vue下拉框值變動(dòng)事件傳多個(gè)參數(shù)
在使用 Vue 進(jìn)行開(kāi)發(fā)時(shí)，下拉框值變動(dòng)事件 @change 是很常用的。
其傳參一般分為兩種方式：
- 默認(rèn)傳參
- 自定義傳參
默認(rèn)傳參
@change 默認(rèn)會(huì)傳選中項(xiàng)標(biāo)識(shí)的參數(shù)，在傳參處不用定義，在方法中直接接受即可。
<template>
<el-select v-model="value" placeholder="請(qǐng)選擇" @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>
此時(shí)控制臺(tái)會(huì)打印下拉框選中項(xiàng)對(duì)應(yīng)的標(biāo)識(shí)值。
自定義傳參
我們經(jīng)常會(huì)遇到需要下拉框傳遞多個(gè)參數(shù)的場(chǎng)景，這是需要自定義傳參方式。
<template>
<div v-for="(item, index) in otherFeesList" :key="index" class="item">
<el-select v-model="value" placeholder="請(qǐng)選擇" @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>
此時(shí)控制臺(tái)會(huì)分別打印下拉框選中項(xiàng)對(duì)應(yīng)的標(biāo)識(shí)值和外部標(biāo)簽中的序號(hào)值。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于IDEA中的.VUE文件報(bào)錯(cuò) Export declarations are not supported by cu
這篇文章主要介紹了關(guān)于IDEA中的.VUE文件報(bào)錯(cuò) Export declarations are not supported by current JavaScript version的問(wèn)題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了?vue3??mixin?混入使用方法，mixin?混入，提供了一種非常靈活的方式，來(lái)分發(fā)?vue?組件中的可復(fù)用功能，一個(gè)mixin?對(duì)象可以包含任意組件選項(xiàng)，當(dāng)組件使用?mixin?對(duì)象時(shí)，所有的?mixin?對(duì)象的選項(xiàng)將被混入組件本身的選項(xiàng)。,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了vue路由劃分模塊并自動(dòng)引入方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置
我們使?vue-element-admin前端框架開(kāi)發(fā)后臺(tái)管理系統(tǒng)時(shí),?般都會(huì)涉及到菜單的權(quán)限控制問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-06-06
Vue-CLI 3 scp2自動(dòng)部署項(xiàng)目至服務(wù)器的方法
這篇文章主要介紹了Vue-CLI 3 scp2自動(dòng)部署項(xiàng)目至服務(wù)器的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
一文搞明白vue開(kāi)發(fā)者vite多環(huán)境配置
Vue是一款流行的JavaScript框架,用于開(kāi)發(fā)動(dòng)態(tài)單頁(yè)應(yīng)用程序,本地安裝和環(huán)境配置是學(xué)習(xí)和使用Vue的第一步,下面這篇文章主要給大家介紹了關(guān)于vue開(kāi)發(fā)者vite多環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2023-06-06
Vue寫(xiě)一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能
這篇文章主要介紹了基于Vue寫(xiě)一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能，在項(xiàng)目開(kāi)發(fā)的過(guò)程，經(jīng)常會(huì)遇到發(fā)送驗(yàn)證碼，點(diǎn)擊之后有60秒倒計(jì)時(shí)的按鈕，今天小編就給大家分享實(shí)例代碼，需要的朋友參考下吧2018-04-04
vue-cli構(gòu)建項(xiàng)目下使用微信分享功能
這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目下使用微信分享功能,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
Vue 路由返回恢復(fù)頁(yè)面狀態(tài)的操作方法
在使用 Vue 開(kāi)發(fā)前端的時(shí)候遇到一個(gè)場(chǎng)景在首頁(yè)進(jìn)行一些數(shù)據(jù)搜索，點(diǎn)擊搜索結(jié)果進(jìn)入詳情頁(yè)面，瀏覽詳情頁(yè)后返回主頁(yè)，所以需要在返回后恢復(fù)跳轉(zhuǎn)前的頁(yè)面參數(shù)狀態(tài)，今天通過(guò)本文給大家分享Vue 路由頁(yè)面狀態(tài)返回的操作方法，一起看看吧2021-07-07
vue element 生成無(wú)線級(jí)左側(cè)菜單的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue element 生成無(wú)線級(jí)左側(cè)菜單的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08