<!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. phoenxi elixir 框架几个方便的命令

    1. 已有命令 mix app.start # Starts all registered apps mix app.tree # Prints the application tree mix ar ...

  2. 含锂电池的 PCBA 运输快递时如何包装？

    含锂电池的 PCBA 运输快递时如何包装? PCBA 和电池必须固定. PCBA 和电池必须独立包装. 独立包装的外壳必须为硬包装,防止运输中挤压导致短路. 电池电量在 80% 或以下.

  3. 什么是spark（二） RDD

    其实你会发现很多概念都是基于RDD提出来的,比如分区,缓存这些操作的对象其实都是RDD:所以不要讲spark的分区,这其实很不专业,分区其实是属于RDD的概念(只有pair RDD才有分区概念) RD ...

  4. RK3288 usb 摄像头旋转

    系统:Android 5.1 下面实现了摄像头 180 度旋转,旋转角度只需修改 orientation. diff --git a/hardware/rockchip/camera/CameraHa ...

  5. 性能优化之mysql索引优化

    sql及索引优化 如何通过慢查询日志发现有问题的sql? 查询次数多且每次查询占用时间长的sql通常为pt-query-digest分析的前几个查询 IO大的sql注意pt-query-digest分 ...

  6. flask 之 rabbit

    使用pika库操作rabbit 查找whereis rabbitmq-server 启动/usr/sbin/rabbitmq-server & 打印了一些rabbitmq服务状态信息,包括内存 ...

  7. jeecg中service中注入jdbc的注解

    @Resource private JdbcTemplate jdbcTemplate;

  8. c#实现QQ群成员列表导出及邮件群发之邮件群发

    主题已迁移至:http://atiblogs.com/ ITO-神奇的程序员

  9. TransportClient操作详解

    Elasticsearch JAVA操作有三种客户端: 1.TransportClient 2.JestClient 3.RestClient 还有种是2.3中有的NodeClient,在5.5.1中 ...

  10. python多分类预测模版，输出支持度，多种分类器，str的csv转float

    预测结果为1到11中的1个 首先加载数据,训练数据,训练标签,预测数据,预测标签: if __name__=="__main__": importTrainContentdata( ...