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获取scrollHeight问题想到的标准问题
May 27 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
微信小程序实现底部导航
Nov 05 Javascript
vue实现路由切换改变title功能
May 28 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
一个php导出oracle库的php代码
2009/04/20 PHP
php实现水仙花数示例分享
2014/04/03 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
htm调用JS代码
2007/03/15 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
JS实现页面打印(整体、局部)
2017/08/18 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
python3抓取中文网页的方法
2015/07/28 Python
实践Vim配置python开发环境
2018/07/02 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
python palywright库基本使用
2021/01/21 Python
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
助学贷款贫困证明
2014/09/23 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
发布会邀请函
2015/01/31 职场文书
就业推荐表院系意见
2015/06/05 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript