当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解vue.js的事件处理器v-on:click

详解vue.js的事件处理器v-on:click

2017年12月12日  | 移动技术网IT编程  | 我要评论

斯亚码勇士,色彩搭配软件,雅虎哦哦邮箱

用 v-on 指令监听 dom 事件

注意:html5中不能使用v-on，换为@

（1）html代码：

<div id="example"> 
 <button v-on:click="greet">greet</button> 
 // 或者 

<button @click="greet">greet</button> 
</div>

（2）js代码：

var vm = new vue({ 
 el: '#example', 
 data: { 
 name: 'vue.js' 
 }, 
 // 在 `methods` 对象中定义方法 
 methods: { 
 greet: function (event) { 
  // 方法内 `this` 指向 vm 
  alert('hello ' + this.name + '!') 
  // `event` 是原生 dom 事件 
  alert(event.target.tagname) 
 } 
 } 
})

 （3）效果展示：

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网