本文介紹了VueJS事件處理器v-on的使用方法，分享給大家，具體如下：
事件監聽可以使用 v-on 指令.
v-on:click表達式
HTML:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>這個按鈕被點擊了 {{ counter }} 次。</p></div><script>new Vue({ el: '#app', data: { counter: 0 }})</script></body></html>每點一次按鈕結果就增加1。
v-on:click調用方法
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <!-- `greet` 是在下面定義的方法名 --> <button v-on:click="greet">Greet</button></div><script>var app = new Vue({ el: '#app', data: { name: 'Vue.js' }, // 在 `methods` 對象中定義方法 methods: { greet: function (event) { // `this` 在方法里指當前 Vue 實例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } }})// 也可以用 JavaScript 直接調用方法app.greet() // -> 'Hello Vue.js!'</script></body></html>點擊按鈕調用greet方法。
v-on:click調用方法傳遞參數
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button></div><script>new Vue({ el: '#app', methods: { say: function (message) { alert(message) } }})</script></body></html>點擊按鈕會提示相應的信息。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
