vue中@click綁定多個事件問題(教你避坑)
更新時間：2024年08月16日 12:10:20 作者：一只花小妖
這篇文章主要介紹了vue中@click綁定多個事件問題(教你避坑),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue中@click綁定多個事件
你可能還不知道，使用@click綁定多個事件的時候有一個小坑坑，因為剛剛我就遇到了，所以，為了你不再踩坑，我就將自己的經(jīng)驗分享給你
可能你在搜索如何使用vue中的@click綁定多個事件的時候，你會搜索到下邊這種教程，也就是同時綁定一個表達式和一個方法的。
然后，他就會跟你說，綁定多個方法的時候，只需要在多個方法之間使用分號隔開即可。這個說法是完全沒有問題的。
但是，有一點一定要記住，同時綁定多個方法的時候，非表達式的方法一定要加上小括號，如果你不加小括號，那么方法就一定不會生效的。
vue @click綁定的函數(shù)，如何同時傳入事件對象和自定義參數(shù)
1、僅僅傳入自定義參數(shù)
- html :
<div id="app"> <button @click="tm(123)">ddddd</button> </div>
- js :
new Vue({
el:'#app',
methods:{
tm:function(e){
console.log(e);
}
}
})則將會輸出數(shù)字123
2、僅僅傳入事件對象
- html：
<div id="app"> <button @click="tm">ddddd</button> </div>
- js :
new Vue({
el:'#app',
methods:{
tm:function(e){
console.log(e);
}
}
})則將會輸入事件對象
3、同時傳入事件對象和自定義參數(shù)
- html：
<div id="app"> <button @click="tm($event,123)">ddddd</button> </div>
- js：
new Vue({
el:'#app',
methods:{
tm:function(e,value){
console.log(e);
console.log(value);
}
}
})則將會輸入事件對象
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
elementui源碼學(xué)習(xí)仿寫el-collapse示例
這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)之仿寫el-collapse示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Vue中使用require.context自動引入組件的操作方法
require.context?是?webpack?提供的一個API,用于創(chuàng)建context,即一組具有相同上下文的模塊,使用?require.context?可以方便地加載多個模塊,并且可以靈活地控制模塊的加載順序和依賴關(guān)系,本文給大家講解Vue中使用require.context自動引入組件的方法,感興趣的朋友一起看看吧2024-01-01
element?el-tree折疊收縮的實現(xiàn)示例
本文主要介紹了element?el-tree折疊收縮的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
今天小編就為大家分享一篇關(guān)于為什么要使用Vuex的介紹，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
本文主要介紹了Vue路由跳轉(zhuǎn)的4種方式小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了vue組件編寫之todolist組件的實例講解，本文給大家介紹的非常詳細,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了vue3項目如何使用prettier格式化代碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue 項目中當訪問路由不存在的時候默認訪問404頁面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
路由跳轉(zhuǎn)的同時傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于vue3路由配置以及路由跳轉(zhuǎn)傳參的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue頁面加載閃爍問題的解決方法,文中給大家提到了v-if 和 v-show 的區(qū)別，解決vue頁面加載時出現(xiàn){{message}}閃退的兩種方法，感興趣的朋友一起看看吧2018-03-03