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