快捷導(dǎo)航

對(duì)vue下點(diǎn)擊事件傳參和不傳參的區(qū)別詳解

更新時(shí)間：2018年09月15日 10:23:51 作者：宇智波幽助

今天小編就為大家分享一篇對(duì)vue下點(diǎn)擊事件傳參和不傳參的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

如下所示：

<div id = 'app'>
  <p><button @click = 'test_click1'>{{btn_text1}}</button></p>
  <br>
  <p><button @click = 'test_click2("123")'>{{btn_text2}}</button></p>
 </div>

 <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
 <script type="text/javascript">

  var _vm = new Vue({
   data : {
    btn_text1 : '點(diǎn)擊1' ,
    btn_text2 : '點(diǎn)擊2'
   },
   methods : {
    test_click1 : function (e) {
     console.log('test_click1--------------------------') ;
     console.log(e) ;   
     // 輸出結(jié)果：MouseEvent {isTrusted: true, screenX: 40, screenY: 121, clientX: 40, clientY: 30, …}

     console.log(e.target) ;  // 輸出結(jié)果：<button>點(diǎn)擊1</button>
     console.log('test_click1--------------------------') ;
    },
    test_click2 : function (e) {
     console.log('test_click2--------------------------') ;
     console.log(e) ;   // 輸出結(jié)果：123
     console.log(e.target) ;  // 輸出結(jié)果：undefined
     console.log('test_click2--------------------------') ;
    }
   }
  }).$mount('#app');
 </script>

以上這篇對(duì)vue下點(diǎn)擊事件傳參和不傳參的區(qū)別詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

element-ui之關(guān)于組件BackToTop回到頂部的使用
這篇文章主要介紹了element-ui之關(guān)于組件BackToTop回到頂部的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
element-ui修改el-form-item樣式的詳細(xì)示例
在使用element-ui組件庫的時(shí)候經(jīng)常需要修改原有樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui修改el-form-item樣式的詳細(xì)示例,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
vue發(fā)送websocket請(qǐng)求和http post請(qǐng)求的實(shí)例代碼
這篇文章主要介紹了vue發(fā)送websocket請(qǐng)求和http post請(qǐng)求的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-07-07
vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式
這篇文章主要介紹了vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
vue2.0 如何在hash模式下實(shí)現(xiàn)微信分享
這篇文章主要介紹了vue2.0 如何在hash模式下實(shí)現(xiàn)微信分享,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01
Pinia 的 Setup Stores 語法使用實(shí)例詳解
這篇文章主要為大家介紹了Pinia 的 Setup Stores 語法使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue-CLI多頁分目錄打包的步驟記錄
這篇文章主要給大家介紹了關(guān)于Vue-CLI多頁分目錄打包的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vue3中7種路由守衛(wèi)的使用大全舉例
最近在學(xué)習(xí)vue,感覺路由守衛(wèi)這個(gè)地方知識(shí)點(diǎn)挺多的,而且很重要,下面這篇文章主要給大家介紹了關(guān)于vue3中7種路由守衛(wèi)的使用大全,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
vue項(xiàng)目中請(qǐng)求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決
這篇文章主要介紹了vue項(xiàng)目中請(qǐng)求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09