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

vuejs 2.0 键盘事件的更多相关文章

  1. selenium 3.0 键盘事件 +强制结束chromedriver进程代码

    selenium自动化测试常常用到键盘操作,一下是键盘操作的详细操作,和部分代码.截图来自于虫师的自动化相关书籍. public static void main(String[] args) thr ...

  2. windows程序里新窗体不在任务栏显示，无标题拖动，键盘事件，始终显示在主窗体上面，单实例运行等

    不显示在任务栏,Alt+Tab也不显示 protected override CreateParams CreateParams { get { const int WS_EX_APPWINDOW = ...

  3. openGL 初试 绘制三角形 和添加鼠标键盘事件

    code: #include <gl/glut.h> #include <stdlib.h> void render(void); void keyboard(unsigned ...

  4. Selenium4.0+Python3系列（四） - 常见元素操作（含鼠标键盘事件）

    一.写在前面 上篇文章介绍的是关于浏览器的常见操作,接下来,我们将继续分享关于元素的常见操作,建议收藏.转发! 二.元素的状态 在操作元素之前,我们需要了解元素的常见状态. 1.常见元素状态判断,傻傻 ...

  5. 2018.12/6 js键盘事件 DOM：0级2级

    DOM0级事件元素绑定多个click最后只执行最后一个click. DOM2级事件元素绑定多个click,都要执行 注意当绑定的多个事件名,函数名,事件发生阶段三者完全一样时,才执行最后一个 div. ...

  6. vuejs监听苹果iphone手机键盘事件

    在iphone手机中,vue提供的keyup事件是不能监听iphone键盘的,但是h5提供的input事件可以做到. 只需要向下面这样处理,就可以解决iphone不响应键盘事件的bug <tem ...

  7. 『心善渊』Selenium3.0基础 — 12、Selenium操作鼠标和键盘事件

    目录 (一)对鼠标的操作 1.鼠标事件介绍 2.ActionChains 类鼠标操作的常用方法 3.perform()方法 4.鼠标事件操作步骤 5.示例 (1)右键单击.左键双击 (2)鼠标拖拽动作 ...

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

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

  9. 关于事件冒泡和键盘事件 以及与Angular的区别

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

随机推荐

  1. 什么是Spark（三）数据的加载和保存

    Spark内置了一些常见的文件格式的处理,包括text/json,csv,sequence等:Spark对于文件处理保持了开放性,还提供了可以通过InputFormat,OutputFormat来进行 ...

  2. Tomcat最大连接数问题

    Tomcat的server.xml中Context元素的以下参数应该怎么配合适 <Connector port="8080" maxThreads="150&quo ...

  3. angular先加载页面再执行事件，使用echarts渲染页面

    剧情重现: 在一个页面中有多个小模块,这几个模块是可以拖动调顺序的,并且其中有两个模块使用了echarts渲染, 调整顺序angular插件有成熟的解决方案angular-sortable,https ...

  4. 启动Oracle数据库时报错ORA-00119 & ORA-00132

    今天启动Oracle数据库时报错ORA-00119 & ORA-00132,找到解决方法做个记录,方便日后查看. 若是ORACLE不提示错误的话,可以自己查看ORACLE的日志文件. Orac ...

  5. h5调用手机摄像头/相册

    <!DOCTYPE HTML><html><head> <title>上传图片</title> <meta charset=" ...

  6. zufeoj NO.1（结构体简单题）

    NO.1 时间限制: 1 Sec  内存限制: 128 MB提交: 457  解决: 172[提交][状态][讨论版] 题目描述 所谓NO.1,就是所有成绩都排在第一的同学,我们假设每个人只有理科,文 ...

  7. 1094 The Largest Generation

    题意:略. 思路:层序遍历:在结点中增加一个数据域表示结点所在的层次. 代码: #include <cstdio> #include <queue> #include < ...

  8. 7503E-M-irf2配置以及bfd配置

    IRF2配置 irf domain 10 irf mac-address persistent always irf auto-update enable irf auto-merge enable ...

  9. 微信APP支付整体流程记录备忘

      支付整体流程见文档:https://pay.weixin.qq.com/wiki/doc/api/app.php?chapter=8_3   商户系统和微信支付系统主要交互说明:     步骤1: ...

  10. 022：SQL优化--JOIN算法

    目录 一. SQL优化--JOIN算法 1.1. JOIN 写法对比 2. JOIN的成本 3. JOIN算法 3.1. simple nested loop join 3.2. index nest ...