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

Vue 键盘事件的更多相关文章

  1. Vue键盘事件

    键盘事件一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  2. vue 键盘事件keyup/keydoen

    使用: <!DOCTYPE html> <html> <head> <title></title> <meta charset=&qu ...

  3. Vue2键盘事件

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

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

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

  5. vue添加页面键盘事件

    我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...

  6. vue使用element-ui的el-input监听不了键盘事件解决

    vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el ...

  7. React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  8. vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件

    vue教程1-05 事件 简写.事件对象.冒泡.默认行为.键盘事件 v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @clic ...

  9. 29.VUE学习之--键盘事件.键盘修饰符的实例讲解

    键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. 理解BitSet

    先来看几道面试题: 1.统计40亿个数据中没有出现的数据,将40亿个不同数据进行排序. 2.现在有1千万个随机数,随机数的范围在1到1亿之间,要求写出一种算法,将1到1亿之间没有在随机数中的数求出来. ...

  2. JQuery 学习笔记--02

    JS 中的 window.onload() 方法与 Jquery 中的 $(document).read(function( ){  }) 的区别 : 加载时机不一样, window.onload() ...

  3. ViewData与ViewBag

    ViewData与ViewBag使用的是同一个数据源,因此数据一样,只是ViewBag 不再是字典的键值对结构,而是 dynamic 动态类型(http://www.cnblogs.com/kissd ...

  4. filter过滤器 默认情况下只对客户端发来的请求有过滤作用 对服务端的跳转不起作用 需要显示的在xml定义过滤的方式才行

    filter过滤器 默认情况下只对客户端发来的请求有过滤作用 对服务端的跳转不起作用 需要显示的在xml定义过滤的方式才行

  5. [SHOI2012]回家的路 最短路

    ---题面--- 题解: 吐槽:找了好久的错,换了n种方法,重构一次代码,,,, 最后发现,,, 数组开小了,其实一开始尝试开大了数组,但唯独没有尝试开大手写队列的数组.... 思路: 有两种方法,这 ...

  6. BZOJ 1342: [Baltic2007]Sound静音问题 | 单调队列维护的好题

    题目: 给n个数字,一段合法区间[l,l+m-1]要求max-min<=c 输出所有合法区间的左端点,如果没有输出NONE 题解: 单调队列同时维护最大值和最小值 #include<cst ...

  7. UVA.10474 Where is the Marble ( 排序 二分查找 )

    UVA.10474 Where is the Marble ( 排序 二分查找 ) 题意分析 大水题一道.排序好找到第一个目标数字的位置,返回其下标即可.暴力可过,强行写了一发BS,发现错误百出.应了 ...

  8. React的this.props.children

    this.props用来获取组件从外部传入的属性,但是this.props.children比较特殊,它是由React给添加上的,表示组件的所有子节点.this.props.children可以用来读 ...

  9. [CQOI2011]放棋子

    想到了50%吧算是. f[i][j][k]表示,前i种,占了j行k列.方案数. 发现,转移要处理:“用c个棋子,占据n行m列”的方案数. 设g[i][j][k]表示,i行j列用k个棋子占的方案数.直接 ...

  10. 全面解析JavaScript的Backbone.js框架中的Router路由

    这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...