使用：

<!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>

当你按下键盘，键盘的值为13的时候，将会执行show函数方法

以上两种keyup和keyup.13方法是一样的，点击回车按键，就会执行 alert 方法

一些便捷方式：

@keyup.13 回车

　　@keyup.enter 回车

　　@keyup.left 左键

　　@keyup.right 右键

　　@keyup.up 上键

　　@keyup.down 下键

　　@keyup.delete 删除键

vue 键盘事件keyup/keydoen的更多相关文章

  1. Vue 键盘事件

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  2. Vue键盘事件

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

  3. IOS中input键盘事件keyup 的兼容解决办法

    用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中很慢,用输入法输入之后,并未立刻相应keyup事件. 解决办法: 在ios设备上可以用html5的input事件 ...

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

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

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

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

  6. vue 的事件冒泡

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

  7. Vue2键盘事件

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

  8. IOS中input键盘事件支持的解决方法

    欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...

  9. jQuery如何使用键盘事件，按住空格键完成进度条效果，并终止键盘事件

    jQuery使用键盘事件 keyup:键盘抬起时 keydown:键盘按下时 keypress:键盘按住时 运行下列代码,可以看效果 $(document).keyup(function () { c ...

随机推荐

  1. Java之JNDI注入

    Java之JNDI注入 About JNDI 0x01 简介 JNDI(Java Naming and Directory Interface)是SUN公司提供的一种标准的Java命名系统接口,JND ...

  2. storm提交拓扑报错processing getcomponentpendingprofileactions

    storm提交新的拓扑,拓扑能提交成功,但是在UI界面查看时每个bolt报错Thrift.processing getComponentPendingProfileActions异常. 原因:stor ...

  3. storm调用kafka重复消费的问题

    1. 实现IBolt接口的bolt需要显式调用collector.ack(); 2. 继承自BaseBasicBlot的bolt, 会帮你自动调用ack的

  4. [hdu6580]Milk

    考虑定义以下dp数组:1.g1[i][j]表示第i行从中间出发向左取j瓶牛奶最少要多久2.g2[i][j]表示第i行从中间出发向右取j瓶牛奶最少要多久3.g3[i][j]表示在g1[i][j]的基础上 ...

  5. Swift-技巧（八）CVPixelBuffer To CGImage

    摘要 Swift 中图像的表现形式不只是 Image,还有更加底层的方式,比如 CVPixelBuffer 像素缓存形式,那么像素缓存转换为可以在应用中展示的 CGImage,就要知道有哪些处理了. ...

  6. asList和subList的缺陷

    概述 在开发中我们经常使用asList去把一个数组转换为List.也存在通过subList.subMap.来对List.Map.Set来进行类似使用subString方法来对String对象进行分割处 ...

  7. 从零开始学Kotlin第二课

    字符串模板 fun main(args:Array<String>){ //主函数main方法 println(diaryGenerater("天安门")); } // ...

  8. Kubernetes（K8s）极速入门

    1. 概述 老话说的好:努力学习,努力提高,做一个有真才实学的人. 言归正传,之前我们聊了 如何使用国内的镜像源搭建 kubernetes(k8s)集群 ,今天我们来聊聊如何在 kubernetes( ...

  9. selenium定位元素方法汇总

    #打开网页前三步 from selenium import webdriver driver=webidriver.Chrome() driver.get("https://www.baid ...

  10. Atcoder Regular Contest 117 D - Miracle Tree（分析性质+构造）

    Atcoder 题面传送门 笑死,阴间语文作业到现在还没写完,为了在这个点保持精神,我只好来颓篇题解辣 我们考虑探究一下怎么最小化 \(\max\limits_{i=1}^nE_i\),我们假设 \( ...