vuejs綁定函數(shù)的方法:1、使用“<標(biāo)簽名 v-on:事件名 = 函數(shù)名>”的形式來綁定;2、使用“<標(biāo)簽名 @事件名 = 函數(shù)名>”的形式來綁定。
本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6版,DELL G3電腦。
vuejs中的事件綁定,使用<v-on:事件名 = 函數(shù)名>
來完成的,這里函數(shù)名是定義在Vue實(shí)例中的methods對(duì)象中的,Vue實(shí)例可以直接訪問其中的方法.
事件綁定的方式
(1) 內(nèi)聯(lián)直接把js寫在標(biāo)簽上調(diào)用方法
<button v-on:click="alert('hi')">執(zhí)行方法的第一種寫法</button>
(2)調(diào)用methods里定義的方法
<button v-on:click="run()">執(zhí)行方法的第一種寫法</button> <button @click="run()">執(zhí)行方法的 簡(jiǎn)寫 寫法</button>
export default { data () { return { msg: '你好vue', list:[] } }, methods:{ run:function(){ alert('這是一個(gè)方法'); } } }
方法傳參,方法直接在調(diào)用時(shí)在方法內(nèi)傳入?yún)?shù)
<button @click="deleteData('111')">執(zhí)行方法傳值111</button> <button @click="deleteData('222')">執(zhí)行方法傳值2222</button>
deleteData(val){ alert(val); },
傳入事件對(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); /*獲取自定義屬性的值*/ }