夏天,一束束剑麻,开出的花,如一串串玲珑的 "铃铛 ",在陽光下争艳斗丽地开放。花期最长的要数百日红了,它在烈日下顽强地开出硕大的、玖瑰红的花朵。每天早晨,树下的石凳上,都坐满了晨读的大哥哥大姐姐,这也成了校园的一处风景。
本文介绍了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>
点击按钮会提示相应的信息。
本文VueJS事件处理器v-on的如何使用方法到此结束。埋首前进,只为抬头能看见梦中最向往的地方。小编再次感谢大家对我们的支持!