<!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. Tencent Server Web(TSW) 腾讯开源的nodejs 基础设施

      Tencent Server Web(TSW),是一套面向WEB前端开发者,以提升问题定位效率为初衷,提供染色抓包.全息日志和异常发现的Node.js基础设施.TSW关注业务的运维监控能力,适用于 ...

  2. ArangoDB Foxx service 使用

    备注:   项目使用的是github https://github.com/arangodb-foxx/demo-hello-foxx 1. git clone git clone https://g ...

  3. oracle11g卸载(win10)

    oracle11g卸载(win10) 0.已在win10安装oracle11g 1.开始->设置->控制面板->管理工具->服务 停止所有Oracle服务. 2.运行Unive ...

  4. 6.Python使用Pandas小案例

    1.使用以下命令引入Pandas和xlrd,引入成功后在pycharm的setting导入即可使用(pip3是由于个人python版本为3.6)==在dos命令行输入以下信息 pip3 install ...

  5. kbuild-(directory)

    -INDEX - this file: info on the kernel build process kbuild.txt - developer information on kbuild kc ...

  6. linux 下apache 停止、重启等操作

    基本的操作方法:本文假设你的apahce安装目录为/usr/local/apache2,这些方法适合任何情况 apahce启动命令:推荐/usr/local/apache2/bin/apachectl ...

  7. 微服务架构 vs. SOA架构

    面向服务架构(SOA)已经存在有些年头了,这是一种用于设计软件的伟大原则.在SOA中,所有组件都是独立自主的,并能为其他组件提供服务.要替换掉系统中的某些部分而不对整个系统造成较大的影响本是个难题,然 ...

  8. php 运行模式

    1.php最常见的五种运行模式. CGI 通用网关接口 FastCGI 常驻内存的CGI CLI 命令行 Web模块  Apache等Web服务器 模块的形式加载php进程 ISAPI 已经不用了 2 ...

  9. Service的用法

    基本用法: 1.创建一个类继承Service类,并重写onBind() 2.重写其他方法:onCreate().onStartCommand().onDestory() 3.在AndroidManif ...

  10. Nginx (一)Windows下编译Nginx源码以及安装 nginx for windows方法步骤

    转载自: http://apps.hi.baidu.com/share/detail/11192699#content Nginx介绍: Nginx ("engine x")是一个 ...