欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2021-09-06 09:01:17|栏目:vue|点击:

用 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)效果展示:

上一篇:解决antd的Form组件setFieldsValue的警告问题

栏    目:vue

下一篇:Vuex 使用及简单实例(计数器)

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

本文地址:http://www.codeinn.net/misctech/172939.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有