键盘事件

<!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. Storm概念学习系列 之Worker工作者进程

    不多说,直接上干货! Worker工作者进程   工作者进程(Worker)是一个java进程,执行拓扑的一部分任务.一个Worker进程执行一个Topology的子集,它会启动一个或多个Execut ...

  2. HAProxy负载均衡安装配置

    1.下载HAProxy    http://haproxy.1wt.eu/download/1.4/src/haproxy-1.4.22.tar.gz   2. 安装haproxy    #tar z ...

  3. UITableViewCellStyle 四种样式

    四种样式如下:

  4. 【mysql】mysql 配置

    安装完mysql后, 要及得配置一下 /etc/mysql/my.cnf 配置字符编码为utf8 [client] default-character-set = utf8 [mysqld] defa ...

  5. 【extjs6学习笔记】1.12 初始： Working with DOM

    http://www.extjs-tutorial.com/extjs/working-with-dom Ext JS是一个DHTML库. 它通过使用JavaScript创建或操作DOM元素来创建UI ...

  6. use scanner/smb/smb_version

    use scanner/smb/smb_version msf auxiliary(smb_version) > set RHOSTS 172.16.21.170RHOSTS => 172 ...

  7. 常用工具使用（sublimeText）

    1.sublime Text  (插件的安装,删除,更新) 1.1 使用 ctrl+`快捷键(Esc下面的波浪线按钮) 或者 菜单项View > Show Console 来调出命令界面,下面代 ...

  8. HDU5152 线段树 + 数论

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5152 ,线段树区间更新 + 点更新 + 数论知识(数论是重点QAQ),好题值得一做. BestCode ...

  9. SAP云平台CloudFoundry中的用户自定义变量

    CloudFoundry应用的manifest.xml里的env区域,允许用户自定义变量,如下图5个变量所示. 使用cf push部署到CloudFoundry之后,在SAP Cloud Platfo ...

  10. C++指针的概念解读

    C++指针的概念解读 超详细 指针是一个特殊的变量,它里面存储的数值被解释成为内存里的一个地址.要搞清一个指针需要搞清指针的四方面的内容:指针的类型,指针所指向的类型,指针的值或者叫指针所指向的内存区 ...