Vue2键盘事件：keydown/keyup...

1.使用

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                methods:{

                    show:function(ev){

                        if(ev.keyCode == 13){

                            alert('你按回车键了');

                        }

                    },

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <input type="text" placeholder="请输入" @keyup="show($event)"> 

        <input type="text" placeholder="请输入" @keyup.13="show($event)">

    </div>

</body>

</html>

当按下键盘的时候，执行show方法，然后再去执行相应的业务。

两个input的效果都是一样的 如果安13  也就是按键 enter   才会执行弹窗！！

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键

Vue 键盘事件的更多相关文章

  1. Vue键盘事件

    键盘事件一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  2. vue 键盘事件keyup/keydoen

    使用: <!DOCTYPE html> <html> <head> <title></title> <meta charset=&qu ...

  3. Vue2键盘事件

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 ...

  4. vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  5. vue添加页面键盘事件

    我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...

  6. vue使用element-ui的el-input监听不了键盘事件解决

    vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el ...

  7. React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  8. vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件

    vue教程1-05 事件 简写.事件对象.冒泡.默认行为.键盘事件 v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @clic ...

  9. 29.VUE学习之--键盘事件.键盘修饰符的实例讲解

    键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. 常见设备在linux中的文件名

    设备 linux中的文件名 IDE硬盘 /dev/hd[a-d] SATA/USB/SCSI/SAS /dev/sd[a-p] 软盘 /dev/fd[0-1] 打印机 25针:/dev/lp[0-2] ...

  2. 51nod 1304 字符串的相似度（exkmp）

    拓展kmp裸题 自己跟自己匹配即可 模板测试=v= #include <iostream> #include <cstring> using namespace std; ; ...

  3. Andorid API Package ---> android

    包名: android                                                        Added in API level 1  URL:http:// ...

  4. POJ3461：Oulipo——题解

    http://poj.org/problem?id=3461 KMP板子,好久以前学过了,直接把板子粘上去即可. #include<cstdio> #include<cstring& ...

  5. BZOJ1009：[HNOI2008]GT考试——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1009 Description 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0&l ...

  6. PHP中缓存技术

    1.全页面静态化缓存 也就是将页面全部生成html静态页面,用户访问时直接访问的静态页面,而不会去走php服务器解析的流程.此种方式,在CMS系统中比较常见,比如dedecms: 一种比较常用的实现方 ...

  7. Linux服务器上nginx安装的完整步骤

    1.环境准备: 服务器系统版本:CentOS 6.5 nginx软件版本:nginx-1.13.9 2.资源准备: nginx下载地址:http://nginx.org/download/nginx- ...

  8. CodeBlocks调试功能快捷教程

    在程序设计中,单步调试能够跟踪程序的执行流程.跟踪过程中,还可以观察变量的变化,从而发现其中存在的问题.单步执行除了可以帮助我们发现设计的程序中存在的问题,对于初学者,还可以帮助我们理解语言的机制. ...

  9. 关于string::size_type

    size_type其实是string模板类定义的一种类型之一,它与size_of的用法相似,只是它根据存储的类型返回字符串的长度.对于 string具体化,将根据char返回字符串的长度,在这种情况下 ...

  10. best code #54 div 2 A 水

    A problem of sorting Accepts: 443 Submissions: 1696 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...