vue.js中怎么綁定事件

小編給大家分享一下vue.js中怎么綁定事件，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

vue.js中綁定事件的方法：1、直接在標(biāo)簽中寫js方法，代碼為【<button v-on:click="alert（'hi'）">執(zhí)行方法的第一種寫法</button>】；2、調(diào)用method的辦法。

vue.js中綁定事件的方法：

1、 直接在標(biāo)簽中寫js方法

 <button v-on:click="alert（'hi'）">執(zhí)行方法的第一種寫法</button>

2、調(diào)用method的辦法

<button v-on:click="run()">執(zhí)行方法的第一種寫法</button>
<button @click="run()">執(zhí)行方法的 簡寫 寫法</button>
export default {     
      data () { 
        return {
          msg: '你好vue',
          list:[]      
        }
      },
      methods:{
           run:function(){
              alert('這是一個(gè)方法');
             }
           }
 }

（1）方法傳參，方法直接在調(diào)用時(shí)在方法內(nèi)傳入?yún)?shù)

<button @click="deleteData('111')">執(zhí)行方法傳值111</button>
<button @click="deleteData('222')">執(zhí)行方法傳值2222</button>

（2）傳入事件對(duì)象

<button data-aid='123' @click="eventFn($event)">事件對(duì)象</button>

eventFn(e){
          console.log(e);
          // e.srcElement  dom節(jié)點(diǎn)
          e.srcElement.style.background='red';
          console.log(e.srcElement.dataset.aid);  /*獲取自定義屬性的值*/
        }

看完了這篇文章，相信你對(duì)vue.js中怎么綁定事件有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！