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>
点击按钮会提示相应的信息。
VueJS事件处理器v-on的更多相关文章
- VueJS事件处理器v-on：事件修饰符&按键修饰符
事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通 ...
- 前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器
一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...
- vue事件处理器
1.监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. 示例: <div id="example-1"> <button ...
- jQuery之Ajax--全局Ajax事件处理器
1.这些方法用于注册事件处理器,用来处理页面上的任何 Ajax 请求,当某些事件触发后,这些事件处理器被调用.如果jQuery.ajaxSteup()中的 global 属性被设置为 true (这也 ...
- 关于vue.js中事件处理器的练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- Vue.js学习 Item8 -- 方法与事件处理器
方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...
- Qt中事件处理的方法（三种处理方法，四种覆盖event函数,notify函数，event过滤，事件处理器。然后继续传递给父窗口。可观察QWidget::event的源码，它是虚拟保护函数，可改写）
一.Qt中事件处理的方式 1.事件处理模式一 首先是事件源产生事件,最后是事件处理器对这些事件进行处理.然而也许大家会问, Qt中有这么多类的事件,我们怎么样比较简便的处理每个事件呢?设想,如果是 ...
- Vue深度学习（4）-方法与事件处理器
方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="app"> <button v-on:click = "greet" ...
- ASP.NET Core Web API下事件驱动型架构的实现（二）：事件处理器中对象生命周期的管理
在上文中,我介绍了事件驱动型架构的一种简单的实现,并演示了一个完整的事件派发.订阅和处理的流程.这种实现太简单了,百十行代码就展示了一个基本工作原理.然而,要将这样的解决方案运用到实际生产环境,还有很 ...
随机推荐
- 【线性基】51nod1312 最大异或和&LOJ114 k大异或和
1312 最大异或和 题目来源: TopCoder 基准时间限制:1 秒 空间限制:131072 KB 分值: 320 难度:7级算法题 有一个正整数数组S,S中有N个元素,这些元素分别是S[0] ...
- Swift实战-单例模式
设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.GoF提出了23种设计模式,本系列将使用Swift语言来实现这些设计模式 概述 整个应用生命 ...
- 转：Java 动态代理的内部实现机制（大体意思正确，写的还行的一篇文章）
转:Java动态绑定的内部实现机制 JAVA虚拟机调用一个类方法时,它会基于对象引用的类型(通常在编译时可知)来选择所调用的方法.相反,当虚拟机调用一个实例方法时,它会基于对象实际 的类型(只能在运行 ...
- kernel thread vs user thread
The most important difference is they use different memory, the kernel mode thread can access any ke ...
- duilib入门简明教程 -- 响应按钮事件(4) （转）
原文转自 http://www.cnblogs.com/Alberl/p/3343610.html 上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = ...
- Android开发基础（java）1
基本概念: 一.结构化方法与结构化程序设计 1.结构化方法:源自迪克斯特拉(E.W.Dijkstra)提出的结构化概念,采用自顶向下.逐步求精的模块化设计方法.核心是将工作分成若干个相互独立的模块,使 ...
- DB2 数据库中字段特定字符替换为空
Update RM_CarInfo set ImportTitle = Replace(ImportTitle,'ZD','') WHERE ImportTitle LIKE'%ZD%';
- Hotspot JVM下，parallel与concurrent的区别
转载于知乎 作者:Ted Mosby链接:https://www.zhihu.com/question/21535747/answer/144884632来源:知乎著作权归作者所有.商业转载请联系作者 ...
- JLOI2018 日志
JLOI2018 今年有幸参加吉林省的省选,考过之后在这里写一下总结和感受. DAY1: t1(chess):首先看到题目,第一想法是暴力,上来直接写了暴力,枚举所有的情况,再在这些情况里找到差值最大 ...
- 10.1综合强化刷题 Day7
noip提高组模拟赛 ...