VueJS事件处理器v-on的使用方法

2019-11-19 15:16:52

字体：大中小

来源：转载

供稿：网友

本文介绍了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>

点击按钮会提示相应的信息。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：浅谈JavaScript find 方法不支持IE的问题

下一篇：javascript基本常用排序算法解析