Vue键盘事件用法总结


Posted in Javascript onApril 18, 2017

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件
键盘事件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
          show: function (ev) {
            alert(ev.keyCode)
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <input type="text" @keydown="show($event)">
</div>
</body>
</html>

keyCode

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
          show: function (ev) {
            if(ev.keyCode==13){
              alert('你按了回车键!')
            }
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <input type="text" @keyup="show($event)">
</div>
</body>
</html>

keyUp

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
          show: function (ev) {
            alert(ev.keyCode)
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <input type="text" @keyup="show($event)">
</div>
</body>
</html>

键盘事件——简写方式

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
          show: function () {
            alert('你按了回车!');
          },
          show2: function () {
            alert('你按了回车!');
          },
          show3: function () {
            alert('你按了上键!');
          },
          show4: function () {
            alert('你按了下键!');
          },
          show5: function () {
            alert('你按了左键!');
          },
          show6: function () {
            alert('你按了右键!');
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <input type="text" @keyup.13="show()">
  <hr>
  <input type="text" @keyup.enter="show2()">
  <hr>
  <input type="text" @keyup.up="show3()">
  <hr>
  <input type="text" @keyup.down="show4()">
  <hr>
  <input type="text" @keyup.left="show5()">
  <hr>
  <input type="text" @keyup.right="show6()">
  <hr>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
JavaScript Sort 表格排序
Oct 31 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
express 项目分层实践详解
Dec 10 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
javascript实现日期三级联动下拉框选择菜单
Dec 03 #Javascript
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
微信小程序实战之自定义模态弹窗(8)
Apr 18 #Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 #Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 #Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 #Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 #Javascript
You might like
用php将任何格式视频转为flv的代码
2009/09/03 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
python开发中module模块用法实例分析
2015/11/12 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
.NET remoting中对象激活的两种方式
2015/06/08 面试题
运动会邀请函范文
2014/02/06 职场文书
网络管理员岗位职责
2014/03/17 职场文书
给市场的环保建议书
2014/05/14 职场文书
社会实践的活动方案
2014/08/22 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
十八大标语口号
2014/10/09 职场文书
教师师德师风整改措施
2014/10/24 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
2015年安全月活动总结
2015/03/26 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
敬老院活动感想
2015/08/07 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL