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下事件驱动型架构的实现（二）：事件处理器中对象生命周期的管理
在上文中,我介绍了事件驱动型架构的一种简单的实现,并演示了一个完整的事件派发.订阅和处理的流程.这种实现太简单了,百十行代码就展示了一个基本工作原理.然而,要将这样的解决方案运用到实际生产环境,还有很 ...
随机推荐
- BZOJ2194 快速傅立叶之二 【fft】
题目 请计算C[k]=sigma(a[i]*b[i-k]) 其中 k < = i < n ,并且有 n < = 10 ^ 5. a,b中的元素均为小于等于100的非负整数. 输入格式 ...
- Sabota?
Sabota? 题目描述 某个公司有n个人, 上下级关系构成了一个有根树.其中有个人是叛徒(这个人不知道是谁).对于一个人, 如果他下属(直接或者间接, 不包括他自己)中叛徒占的比例超过x,那么这个人 ...
- Normalize.css用法
1 Normalize.css用法 重置样式非常多,Normalize.css和reset是两个常用的重置 CSS 文件 http://necolas.github.io/normalize.css/ ...
- 关于javascript的"+="连接符
今天在读<javascript Dom 编程艺术>的时候,看到了自己感觉陌生的+=连接符(小白一枚,各位勿耻笑) "+="连接符,可以看成完成一次“加法和赋值”(或者“ ...
- live-server 快速搭建静态服务
作为切图仔呢,平时都是在修改页面样式.展示后台返回的数据.调试js效果,这时候呢就需要搭一个服务器以便我们调试.平时我一般用的都是wamp,在www目录下新建项目然后开始撸代码,不过有时候呢不太方便, ...
- hdu 1403 Longest Common Substring 后缀数组 模板题
题目链接 题意 问两个字符串的最长公共子串. 思路 加一个特殊字符然后拼接起来,求得后缀数组与\(height\)数组.扫描一遍即得答案,注意判断起始点是否分别在两个串内. Code #include ...
- g++的编译选项:-Wl,-rpath=【转】
转自:http://blog.csdn.net/russule/article/details/7057398 动态链接库 1 生成hello.so g++ -shared hello.cpp -ol ...
- Selenium2+python自动化（学习笔记3）
1.加载firefox配置 参考代码: # coding=utf-8from selenium import webdriver# 配置文件地址,打开Firefox点右上角设置--帮助--故障排除信息 ...
- HDU4757 Tree(可持久化Trie)
写过可持久化线段树,但是从来没写过可持久化的Trie,今天补一补. 题目就是典型的给你一个数x,和一个数集,问x和里面的某个数xor起来的最大值是多少. 最原始的是数集是固定的,只需要对数集按照高到低 ...
- 4C 2018 福到了
输入字符c(只含有@和空格).数字n.规模n*n的二维字符矩阵. 若倒过来的数组和原数组一样形式输出提示. 最后输出以字符c替换的字符数组. #include <bits/stdc++.h> ...