快捷導(dǎo)航

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

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

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

如下所示：

<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)文章

Vue.js學(xué)習(xí)筆記之 helloworld
vue是法語(yǔ)中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API。有需要的小伙伴可以參考下
2016-08-08
關(guān)于vant的時(shí)間選擇器使用方式
這篇文章主要介紹了關(guān)于vant的時(shí)間選擇器使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
淺談axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法
在實(shí)際項(xiàng)目中，我們可能需要對(duì)請(qǐng)求進(jìn)行“防抖”處理。本文主要實(shí)現(xiàn)axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求，具有一定的參考價(jià)值，感興趣的可以了解一下
2021-08-08
vue中使用scrollTo無(wú)效的解決方法
本文主要介紹了vue中使用scrollTo無(wú)效的解決方法，想要使用scrollTo使當(dāng)前網(wǎng)頁(yè)滾動(dòng)到指定位置，本文就來(lái)解決一下，具有一定的參考價(jià)值，感興趣的可以了解一下
2023-08-08
antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
淺談Vue中插槽slot的使用方法
這篇文章主要給大家分享了 Vue中插槽slot的使用方法，下面文章內(nèi)容圍繞插槽slot的相關(guān)資料展開其的使用方法,需要的朋友可以參考一下，希望多大家有所幫助
2021-11-11
vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序
本文主要介紹了vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
vue2.0 element-ui中el-select選擇器無(wú)法顯示選中的內(nèi)容(解決方法)
這篇文章主要介紹了vue2.0 element-ui中的el-select選擇器無(wú)法顯示選中的內(nèi)容,在文中小編使用的是element-ui V2.2.3。具體解決方法及示例代碼大家參考下本文
2018-08-08
vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問題(用watch解決)
這篇文章主要介紹了vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問題(用watch解決)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue?el-table實(shí)現(xiàn)右鍵菜單功能
這篇文章主要為大家詳細(xì)介紹了Vue?el-table實(shí)現(xiàn)右鍵菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04