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下事件驱动型架构的实现（二）：事件处理器中对象生命周期的管理
在上文中,我介绍了事件驱动型架构的一种简单的实现,并演示了一个完整的事件派发.订阅和处理的流程.这种实现太简单了,百十行代码就展示了一个基本工作原理.然而,要将这样的解决方案运用到实际生产环境,还有很 ...
随机推荐
- autoprefixer小记
autoprefixer配置 // var aPostcss = [require('autoprefixer')({ browsers: ['ios>=3','android>=2',' ...
- wooyun
转自:http://zone.wooyun.org/content/19128 tencent.com baidu.com sina.com.cn sohu.com discuz.net rising ...
- element el-cascader设置默认值
原文:https://www.jianshu.com/p/b690d7fe6ec0 注意两点就行了 <el-form-item label="AP名称"> <el ...
- vue-element-admin开发模式下style标签热更新失效[解决办法]
参考:https://forum.vuejs.org/t/vue-cli-3-x-style/46306/3 vue.config.js添加配置 css: { sourceMap: false, mo ...
- 汇编中的 imul 指令
1.这是整形乘法指令,无论是 unsigned int 还算是 signed int 实际上指令都是进行相同的运算,只不过最终的结果是由程序中的类型来做相应的解读 2.imul 指令实际上不会发生 o ...
- Docker(二)：Docker的用途
Docker的优点: 1.Docker容器的启动可以在秒级实现,相比传统虚拟机方式快的多. 2.Docker资源利用率很高,一台主机上可以同时运行数千个Docker容器. 3.容器除了运行其中应用外, ...
- PE笔记之NT头PE签名
typedef struct _IMAGE_NT_HEADERS { DWORD Signature; //PE头签名PE\0\0 IM ...
- 浅谈控件(组件)制作方法一（附带一delphi导出数据到Excel的组件实例）（原创）
来自:http://blog.csdn.net/zhdwjie/article/details/1490741 -------------------------------------------- ...
- 洛谷——P1977 出租车拼车
题目背景 话说小 x 有一次去参加比赛,虽然学校离比赛地点不太远,但小 x 还是想坐 出租车去.大学城的出租车总是比较另类,有“拼车”一说,也就是说,你一个人 坐车去,还是一堆人一起,总共需要支付的钱 ...
- 关于npm无法安装依赖包以及安装包缓慢的解决方法
因为npm的服务器在国外,导致我们使用npm安装第三方包缓慢.而且有的第三方包是被墙的. 因此,作为墙内人,必须解决这个问题,否则开发起来实在是太坑了! 推荐大家使用淘宝的镜像(cnpm),它以每10 ...