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


Posted in Javascript onSeptember 27, 2017

本文介绍了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 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
使用flow来规范javascript的变量类型
Sep 12 Javascript
jquery css实现流程进度条
Mar 26 jQuery
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
javascript基本常用排序算法解析
Sep 27 #Javascript
Angularjs cookie 操作实例详解
Sep 27 #Javascript
js移动端图片压缩上传功能
Aug 18 #Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 #Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 #Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 #Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 #Javascript
You might like
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
PHP学习笔记之session
2018/05/06 PHP
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
js实现表格字段排序
2014/02/19 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
python中快速进行多个字符替换的方法小结
2016/12/15 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
售后服务科岗位职责范文
2013/11/13 职场文书
七年级地理教学反思
2014/01/26 职场文书
《太阳》教学反思
2014/02/21 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
国贸专业求职信
2014/06/28 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
上班旷工检讨书
2015/08/15 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
python爬取某网站原图作为壁纸
2021/06/02 Python