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 删除键

Vue2键盘事件：keydown/keyup...的更多相关文章

  1. 键盘事件keydown、keypress、keyup随笔整理总结（摘抄）

    原文1:http://www.cnblogs.com/silence516/archive/2013/01/25/2876611.html 原文2:http://www.cnblogs.com/leo ...

  2. 详解键盘事件(keydown，keypress，keyup)

    一.键盘事件基础 1.定义 keydown:按下键盘键 keypress:紧接着keydown事件触发(只有按下字符键时触发) keyup:释放键盘键 顺序为:keydown -> keypre ...

  3. Vue2键盘事件

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

  4. 键盘事件keydown、keypress、keyup随笔整理总结

    英文输入法:   事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chr ...

  5. 键盘事件keydown、keypress、keyup

    事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chrome:输入触发k ...

  6. 无线端不响应键盘事件(keydown,keypress,keyup)

    今天在项目时,在android手机上使用输入法的智能推荐的词的话,不会触发keyup事件,一开始想到在focus时使用一个定时器,每隔100ms检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...

  7. 键盘事件（keyup、keydown、keypress）

    1.onkeyup 和onkeydown时,keyCode是不区分大小写的,会将小写字母自动转化为大写字母. 2 onkeypress时,区分大小写. 3兼容event.keyCode||event. ...

  8. Vue2学习笔记:键盘事件

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  9. Vue 键盘事件

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

随机推荐

  1. e藏在哪里？

    e约等于2.718,是和pi齐名的自然常数. 在任何一个均匀随机器中,都藏着e. import random def count(): k = 0 s = 0 while s < 1: k += ...

  2. Ant压缩与解压缩

    package com.test.utils; import java.io.File; import java.io.FileOutputStream; import java.io.InputSt ...

  3. No package的问题解决

    更新pecl扩展 yum  install epel-release  //扩展包更新包yum  update //更新yum源

  4. android sdk 编译--如何将源代码加入android.jar，以及make原理

    首先是这个问题如何修改. 在/frameworks/base/Android.mk中,找到如下行:packages_to_document :=在该变量的赋值语句最后添加xxxxx (这里是你的包的名 ...

  5. 如何设置IIS程序池的回收时间，才能最大程度的减少对用户的影响?

    作为.Net开发人员,其实对IIS的应用程序池知之甚少,在工作中我也有几次遇到过网站无故打不开的情况,找了半天原因也找不到是怎么造成的,有一次我给网站找了一个程序程序池后发现就能正常访问了,这也让我对 ...

  6. 【Oracle】Oracle中使用转义字符

    1.Oracle 特殊字符 转义 关键词:oracle    转义                                           环境:oracle9i plsql 在plsql ...

  7. 【struts2】<s:url>标签

    <s:url>标签一般和超链接 <a>一起使用,用于带多个参数. <a href=" <s:url action=""> < ...

  8. Fiddler高级用法-设置断点

    我们知道Fiddler是位于客户端和服务器之间的代理,它能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请求数据.设置断点.调试web应用.修改请求的数据,甚至可以修改 ...

  9. hibernate的hql查询语句总结

    这篇随笔将会记录hql的常用的查询语句,为日后查看提供便利. 在这里通过定义了三个类,Special.Classroom.Student来做测试,Special与Classroom是一对多,Class ...

  10. css ::selection 的妙用

    1.选中页面文字和元素时的背景颜色 ::selection { background: #25b864; color: #fff; } 2.不能选择页面内容(但可以拖拽内容进行复制.挺好玩的) ::s ...