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 相关文章推荐
jquery 学习之二 属性(类)
Nov 25 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
vue小白入门教程
Apr 02 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 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
php 验证码实例代码
2010/06/01 PHP
php判断变量类型常用方法
2012/04/24 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php简单日历函数
2015/10/28 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
python time模块用法实例详解
2014/09/11 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python温度转换实例分析
2018/01/17 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
python实现udp传输图片功能
2020/03/20 Python
python实现mean-shift聚类算法
2020/06/10 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
大学生创业感言
2014/01/25 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
公益广告语集锦
2014/03/13 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
房产公证书样本
2015/01/23 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS