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 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
详解Node.js如何处理ES6模块
May 15 Javascript
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
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
shiro授权的实现原理
2017/09/21 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
详解python中的线程与线程池
2019/05/10 Python
python os.fork() 循环输出方法
2019/08/08 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
教师实习期自我鉴定
2013/10/06 职场文书
单位未婚证明范本
2014/01/18 职场文书
妇女工作先进事迹
2014/08/17 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书