Vue2.0 【第一季】第5节 v-on：绑定事件监听器
Vue2.0 【第一季】 第5节 v-on：绑定事件监听器
第五节 v-on：绑定事件监听器
v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
一、使用绑定事件监听器，编写一个加分减分的程序。
程序代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-on 实例</h1>
<hr>
<div id="app">
本场比赛得分：{{score}}
<p>
<button v-on:click="add">加分</button>
<button v-on:click="subtract">减分</button><br/>
<!-- 还有另一种写法：<button @click="subtract">减分</button><br/> -->
<!-- 我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。 绑定事件写法： -->
<input type="text" v-on:keyup.enter="onEnter" v-model="score2">
<!--这里绑定的是enter键，也可以写键值13，这样按enter键可以进行操作-->
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
score:0,
score2:1
},
methods:{
add:function(){
this.score++;
},
subtract:function(){
this.score--;
},
onEnter:function(){
this.score=this.score + parseInt(this.score2); //js代码，因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。
}
}
})
</script>
</body>
</html>
看一下浏览器效果：
附：键盘键值表：
Vue2.0 【第一季】第5节 v-on：绑定事件监听器的更多相关文章
- 分布式压测系列之Jmeter4.0第一季
1)Jmeter4.0介绍 jmeter是个纯java编写的开源压测工具,apache旗下的开源软件,一开始是设计为web测试的软件,由于发展迅猛,现在可以压测许多协议比如:http.https.so ...
- vue2.0那些坑之使用elementUI后v-on:click事件不生效问题
最近在维护vue2.0的项目,遇到了不少坑,在这里说下引用elementui之后,使用v-on:click绑定点击事件无效的情况,如下图: 我想阻止冒泡事件,发现无效.这里将@click换成了@cli ...
- 第一百七十节，jQuery，事件对象，event 对象，默认行为，冒泡
jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 完善慕课网Vue2.0购物车功能
vue一个Made in China创造出来的框架真的很66666~ 如果你是刚入门还不太懂也没有看慕课网上这门视频的,请先看一遍或许你会收获满满~ 使用vue2.0实现购物车和地址选配功能这门课程, ...
- vue2.0 父子组件之间的通信问题
概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...
- vue2.0 vs vue
vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...
- Vue2.0 【第一季】第8节 v-pre & v-cloak & v-once
目录 Vue2.0 [第一季] 第8节 v-pre & v-cloak & v-once v-pre 指令 v-cloak 指令 v-once 指令 Vue2.0 [第一季] 第8节 ...
- Vue2.0 【第一季】第7节 v-bind指令
目录 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v-bind缩写 绑定CSS样式 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v- ...
随机推荐
- Eclipse安装tomcat插件
安装插件:Pivotal tc Server Integration for Eclipse右击server可以定位到web项目部署的目录http://marketplace.eclipse.org/ ...
- Junit 单元测试在 intelliJ IDEA 中的安装
1.为什么使用Junit我们都知道,main 方法是一个程序的入口,通常来说,没有main方法,程序就无法运行.我们经常会写一些class文件(如下图所示),他们并没有自己的main方法.那么我们如何 ...
- Allure介绍
以下内容基于pytest的框架进行展示: 什么是Allure Allure是一个独立的报告插件,生成美观易读的报告,目前支持语言:Java, PHP, Ruby, Python, Scala, C#. ...
- 【转载/部分修改】超实用STL——set的入门使用
本文部分转载自他人博文,少部分自行进行了添改qwq 参考文章:https://blog.csdn.net/chaoyueziji123/article/details/38422211 作者:chao ...
- [洛谷P4299] 首都
题目传送门 还是维护子树信息. 但是这里多了一个找重心的操作. 这里有一个关于树重心的结论,据说可以用反证法证明.反正我不会证 就是:新的重心一定在原来两个重心之间的那条树链上. 这样我们逐步缩小搜索 ...
- c中结构体边界对齐
原则1.普通数据成员对齐规则:第一个数据成员放在offset为0的地方,以后每个数据成员存储的起始位置要从该成员大小的整数倍开始(比如int在32位机为4字节,则要从4的整数倍地址开始存储). 原则2 ...
- 转:zabbix 2.4.4 更换 logo
zabbix 2.4.4 更换 logo 想把 zabbix 的 logo 改为自己公司的. 把更改过程做一下记录 先找到修改文件的目录 zabbix 版本 2.4.4 操作系统 linux 目录定位 ...
- shell知多少？
Shell字面理解就是个"壳",是操作系统(内核)与用户之间的桥梁,充当命令解释器的作用,将用户输入的命令翻译给系统执行.Linux中的shell与Windows下的DOS一样,提 ...
- 测试工程师不懂AI，还有未来吗？
阿里妹导读:近几年人工智能.机器学习等词漫天遍地,似乎有一种无AI,无研发,无AI,无测试的感觉.有人说:不带上"智能"二字,都不好意思说自己是创新.我们先暂且不评论对错,只探讨这 ...
- Git学习笔记（二） · 非典型性程序猿
远程库的使用 前面说到的都是git在本地的操作,那么实际协作开发过程中我们肯定是要有一个远程版本库作为项目的核心版本库,也就是投入生产使用的版本.这里我们以 Github为例.Github是一个开放的 ...