Vue2.0 【第一季】第5节 v-on：绑定事件监听器
2024-09-07 07:31:18
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>
看一下浏览器效果：
附：键盘键值表：
最新文章
- 【C#进阶系列】24 运行时序列化
- JSP连接MySQL数据库问题
- 苹果iOS强制HTTPS迫在眉睫，距离2017年只剩1天，准备好了么？
- Intellij IDEA 自动生成 serialVersionUID
- 仿网易新闻 ViewPager 实现图片自动轮播
- javascript父级鼠标移入移出事件中的子集影响父级的处理方法
- SQL Server（七）——存储过程
- Nodejs进阶：如何将图片转成datauri嵌入到网页中去
- keyup、keydown和keypress
- cnblogs.com的用户体验
- PHP截取汉字乱码问题解决方法mb_substr函数的应用
- 关于Unix时间戳
- spring mvc后台接收中文乱码
- TCP流量控制和拥塞控制
- mysql并行复制降低主从同步延时的思路与启示
- [ES]elasticsearch章5 ES的分词（二）
- 利用AnyProxy代理监控APP流量
- 13.python错误和异常
- salesforce lightning零基础学习(九) Aura Js 浅谈二: Event篇
- springBoot入门文章