Vue下拉框值變動事件傳多個參數(shù)方式

更新時間：2024年04月25日 09:01:03 作者：天航星

這篇文章主要介紹了Vue下拉框值變動事件傳多個參數(shù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue下拉框值變動事件傳多個參數(shù)

在使用 Vue 進(jìn)行開發(fā)時，下拉框值變動事件 @change 是很常用的。

其傳參一般分為兩種方式：

默認(rèn)傳參
自定義傳參

默認(rèn)傳參

@change 默認(rèn)會傳選中項(xiàng)標(biāo)識的參數(shù)，在傳參處不用定義，在方法中直接接受即可。

<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>

此時控制臺會打印下拉框選中項(xiàng)對應(yīng)的標(biāo)識值。

自定義傳參

我們經(jīng)常會遇到需要下拉框傳遞多個參數(shù)的場景，這是需要自定義傳參方式。

<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>

此時控制臺會分別打印下拉框選中項(xiàng)對應(yīng)的標(biāo)識值和外部標(biāo)簽中的序號值。

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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