您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)怎么在Vue中使用v-on事件處理器,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
v-on:click表達(dá)式
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(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>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次。</p> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }) </script> </body> </html>
每點(diǎn)一次按鈕結(jié)果就增加1。
v-on:click調(diào)用方法
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(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` 對(duì)象中定義方法 methods: { greet: function (event) { // `this` 在方法里指當(dāng)前 Vue 實(shí)例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接調(diào)用方法 app.greet() // -> 'Hello Vue.js!' </script> </body> </html>
點(diǎn)擊按鈕調(diào)用greet方法。
v-on:click調(diào)用方法傳遞參數(shù)
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(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>
以上就是怎么在Vue中使用v-on事件處理器,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。