VueJS事件處理器v-on的使用方法
更新時間:2017年09月27日 17:03:39 作者:boonya
本篇文章主要介紹了VueJS事件處理器v-on的使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了VueJS事件處理器v-on的使用方法,分享給大家,具體如下:
事件監(jiān)聽可以使用 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>
每點一次按鈕結(jié)果就增加1。
v-on:click調(diào)用方法
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` 在方法里指當(dāng)前 Vue 實例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接調(diào)用方法 app.greet() // -> 'Hello Vue.js!' </script> </body> </html>
點擊按鈕調(diào)用greet方法。
v-on:click調(diào)用方法傳遞參數(shù)
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>
點擊按鈕會提示相應(yīng)的信息。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue實現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式
這篇文章主要介紹了Vue實現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09Vue input控件通過value綁定動態(tài)屬性及修飾符的方法
這篇文章主要介紹了 Vue input控件通過value綁定動態(tài)屬性及修飾符的方法,需要的朋友可以參考下2017-05-05Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06