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下事件驱动型架构的实现（二）：事件处理器中对象生命周期的管理
在上文中,我介绍了事件驱动型架构的一种简单的实现,并演示了一个完整的事件派发.订阅和处理的流程.这种实现太简单了,百十行代码就展示了一个基本工作原理.然而,要将这样的解决方案运用到实际生产环境,还有很 ...
随机推荐
- Icon 转 Bitmap
HBITMAP IconToBitmap(HICON hIcon, SIZE* pTargetSize = NULL) { ICONINFO info = {}; if(hIcon == NULL | ...
- cf 542E - Playing on Graph
cf 542E - Playing on Graph 题目大意 给定一个\(n\le 1000\)个点的图 求经过一系列收缩操作后能否得到一条链,以及能得到的最长链是多长 收缩操作: 选择两个不直接相 ...
- hdu 5930 GCD 线段树上二分/ 强行合并维护信息
from NOIP2016模拟题28 题目大意 n个点的序列,权值\(<=10^6\) q个操作 1.单点修改 2.求所有区间gcd中,不同数个数 分析 1.以一个点为端点,向左或向右的gcd种 ...
- [LeetCode] Remove Duplicates from Sorted List 链表
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
- Virtualbox 设置虚拟机上网并和主机互通（如ping等）
我的主机是Ubuntu12.04, 安装virtualbox虚拟了一个xp系统.把xp作为一个开发用的机器,需要上网,并且和主机以及虚拟机之间互相访问. 1. 在virtual设置界面,将xp系统的网 ...
- LeetCode OJ-- Jump Game II **
https://oj.leetcode.com/problems/jump-game-ii/ 给一个数列,每次可以跳相应位置上的步数,问跳到最后位置至少用几步. 动态规划: j[pos]表示从0到po ...
- Eclipse 导入项目乱码问题
1.编码不对 a.对某文件或某工程更改编码: 鼠标移到工程名或文件名,右键->Properties->Resource->Text file enCoding ->更改编码(G ...
- DB2 With语句递归
WITH T1 (T11 , T22 , T33 , T44) AS (SELECT TASKID , REPLY , ROWNUMBER () OVER (PARTITION BY TASKID) ...
- Codeforces Round #451 (Div. 2) A. Rounding【分类讨论/易错】
A. Rounding time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...
- FZU 1075 分解素因子【数论/唯一分解定理/分解素因子裸模板】
[唯一分解定理]:https://www.cnblogs.com/mjtcn/p/6743624.html 假设x是一个正整数,它的值不超过65535(即1<x<=65535),请编写一个 ...