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学习笔记:键盘事件的更多相关文章

  1. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  2. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  3. Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T>

    Caliburn.Micro学习笔记目录 今天 说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子 看一它的的实现 ...

  4. iOS学习笔记--触摸事件

    最近空闲时间在学习iOS相关知识,几周没有更新文章了,今天总结下这些天的学习内容,也整理下iOS的学习笔记,以便以后查阅翻看- iOS中的事件可以分为3大类型: 触摸事件 加速计事件 远程控制事件 响 ...

  5. vue2 学习笔记2

    文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...

  6. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  7. javascript学习笔记 --event事件

    事件源(按钮.窗口)->事件对象->事件处理程序 事件源可以是网页元素浏览器窗口事件处理程序一般是一个函数.       一个事件可以被多个函数处理       事件的总类       鼠 ...

  8. Python:GUI之tkinter学习笔记3事件绑定

    相关内容: command bind protocol 首发时间:2018-03-04 19:26 command: command是控件中的一个参数,如果使得command=函数,那么点击控件的时候 ...

  9. JS学习笔记6_事件

    1.事件冒泡 由内而外的事件传播(从屏幕里飞出来一支箭的感觉) 2.事件捕获 由表及里的事件传播(力透纸背的感觉) 3.DOM事件流(DOM2级) 事件捕获阶段 -> 处于目标阶段 -> ...

随机推荐

  1. webbench的安装

    1.下载webbench包: 2.下载完毕后,在linux中安装   root@jack-desktop:~/software# tar xvzf webbench-1.5.tar.gz   root ...

  2. java-jdk7-forkjoin异常返回

    来自:http://ifeve.com/fork-join-5/ 在Java中有两种异常: 已检查异常(Checked exceptions):这些异常必须在一个方法的throws从句中指定或在内部捕 ...

  3. ruby中nil?, empty? and blank?的选择

    In Ruby, you check with nil? if an object is nil: article = nil article.nil? # => true empty? che ...

  4. C#字符串中的中文逗号转英文逗号

    public static string ToDBC(string input) { char[] c = input.ToCharArray(); for (int i = 0; i < c. ...

  5. MVC页面缓存

    1.OutputCache 属性 contact.cshtml    [OutputCache(Duration=10)] public ActionResult Contact()   {      ...

  6. ABP学习入门系列（六）（菜单和分页）

    1,菜单.在最新的abp3.1.2中 菜单栏是在左侧的如下图(上中下的结构),中间部分就是我们要添加菜单的地方. ABP集成了通用的创建和显示菜单的方式,在展示层web下的appstart文件夹下找到 ...

  7. WPF popup被截断的原因和修改方法

    原因:wpf里 popup不能超过屏幕75%的面积,不知道为什么要这么设置? 修改方法: private void SetPopupScreen() { Rect rtWnd = , , gridMa ...

  8. MVC初级教程（二）

    演示产品源码下载地址:http://www.jinhusns.com/Products/Download 

  9. async 和 await 的用法示例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. jQuery如何根据元素值删除数组元素

    用到的方法$.inArry(); $.inArray( value, array [, fromIndex ] ) value 任意类型 用于查找的值. array Array类型 指定被查找的数组. ...