键盘事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

<div id="hdcms">

    <!--13=enter回车 /tab/delete/esc/space(空格)/up/down/left/right-->

    <!--alt/ctrl/shift 这三个键要配合其它任意键才会触发 例: @keyup.ctrl.65 (ctrl+a键触发 65是a的asci码)-->

    <input type="text" v-model='content' @keyup.ctrl.65="keyEvent">

    <li>{{content}}</li>

</div>

<script>

    var app = new Vue({

        el: '#hdcms',

        data: {

            content:'',

        },

        methods: {

            keyEvent(){

                console.log(this.content);

            }

        }

    });

</script>

</body>

</html>

效果:

ASCII 表

如果是字母要用十进制的大字字母的ascii,才能对应到键盘上对应的字母键

https://baike.baidu.com/item/ASCII/309296?fr=aladdin

29.VUE学习之--键盘事件.键盘修饰符的实例讲解的更多相关文章

  1. Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)

    目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...

  2. Vue中监听 键盘事件及修饰符

    键盘事件: keyCode 实际值 48到57     0 - 9 65到90           a - z ( A-Z ) 112到135       F1 - F24 8            ...

  3. vue学习 `${HH}-${mm}-${dd}` 按键修饰符

    vue 有一种拼接字符串的规范写法 //键盘 Tab 键 上边的键 英文输入状态 然后采用类似EL表达式${变量}return `${}:${}:${}` //有时候我们经常在输入完密码之后,按回车E ...

  4. 20.VUE学习之-变异方法push的留言版实例讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 19.VUE学习之- v-for与computed结合功能 筛选实例讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue.js学习笔记（三） - 修饰符

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...

  7. vue-learning：28 - component - 组件事件的修饰符`.native / .sync`，以及组件属性`model`

    组件事件的修饰符.native / .sync,以及组件属性model .native 原生事件修饰符 在一个组件中,如果我们为其绑定一个原生的点击事件@click,基本是无效的. 在vue中对组件绑 ...

  8. python学习之鼠标事件&键盘事件

    driver.maximize_window()   浏览器最大化 ActionChains类与输入事件 1:from selenium.webdriver.common.action_chains ...

  9. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

随机推荐

  1. Unity www动态加载网上图片

    一. 1.新建一个UGUI的Button,删掉它的Image组件,添加一个Raw Image组件.如图: 由于删除了Image组件,所以画圈的位置是空的,运行后会自动把Raw Image添加到那里. ...

  2. (转)linux paste命令用法详解

    linux paste命令用法详解原文:http://www.xfcodes.com/linuxcmd/mulu/10211.htmlinux下paste命令,可用于合并文件的列. 功能说明:合并文件 ...

  3. vim制表符占位个数修改

    进入配置文件:$ sudo vi /etc/vim/vimrc 在文件末尾添加:set ts=4

  4. Oracle使用jdbc调用带游标参数的存储过程

    package com.jckb.procedure; import java.sql.CallableStatement; import java.sql.Connection; import ja ...

  5. Android Service创建USB HOST通信

    之前做了一个关于Android USB通信的Case,通过Android的USB总线给Zigbee供电,和板载的Zigbee(基于Zigbee的自组网)进行通信.要使用Android的USB Host ...

  6. Python学习笔记-day1（while流程控制)

    count = 0 while True: #print('count:',count) if count == 3: print('you guess over 3 times!fuck off!' ...

  7. dsniff

    /usr/local/sbin/dsniff 这个东西好强大,获取到用户名和密码 bt服务区器上:dsniff -i eth0 -m(自动协议检测) 在另外一个电脑上打开网页,登陆ftp服务器,回头看 ...

  8. python+selenium之自动生成excle，保存到指定的目录下

    进行之自动化测试,想把自动生成的excle保存到指定的目录下.网上百度的代码如下: import xlwt import time time = time.strftime ('%Y%m%d%H%M% ...

  9. Visual Studio 2015 Preview 使用中问题一枚

    只要碰到IO读写,文件不存在之类的系统异常,就会崩溃一下给你看看.直接重新VS. 不该有的问题确实存在着???? 正常情况是这样的 直接崩溃时万万不行的!!!!

  10. spring-autowire机制

    在xml配置文件中,autowire有5种类型,可以在<bean/>元素中使用autowire属性指定 模式                        说明 no            ...