键盘事件

<!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. 如何在Eclipse中正确安装Jetty插件并初步使用（图文详解）

    不多说,直接上干货! 最近在做一个Storm项目,需要用到Jetty来进行展示.它类似于Tomcat. 一.eclipse中jetty插件安装 打开eclipse,依次点击菜单Help->Ecl ...

  2. Storm概念学习系列之storm核心组件

    不多说,直接上干货! Storm核心组件 了解 Storm 的核心组件对于理解 Storm 原理非常重要,下面介绍 Storm 的整体,然后介绍 Storm 的核心. Storm 集群由一个主节点和多 ...

  3. kill 与 kill -9(面试中问道的知识点)

    转载自:http://www.2cto.com/os/201305/215267.html 需要特别说明的是,SIGKILL和SIGSTOP这两个信号既不能被应用程序捕获,也不能被操作系统阻塞或忽略. ...

  4. discuz!X2头像无法显示解决方法

    discuz x2刚刚发布,很多站长就迫不及待地将自己的论坛升级. 可是安装完discuz X2之后,就马上发现论坛会的头像都不见了,取而代之的是一个小红叉.会员也没有办法设置自己的头像. 各位站长们 ...

  5. es6-async

    含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator 函数,依次读取 ...

  6. 360 so动态脱壳

    环境及工具 手机    : 中兴 U887 系统版本:   Android 2.3.5 工具    :   IDA pro 6.6 .0101Editor 版权声明:未经许可,随便转载 目前so加壳有 ...

  7. Eucalyptus-instance启动后查看运行状态

    1.前言 在eucalyptus中通过虚拟机模板,创建并启动一个虚拟机,这个时候虚拟机启动正常,但是外部一直无法访问也ping不通,正对这种情况我们如何检查排除问题呢? 两种检查问题的方法: 1).在 ...

  8. Git命令--保存用户名和密码

    使用git各项操作时,总是会出现输入密码的弹窗,且需要多次输入,很是繁琐,通过git命令可以记住密码,避免多次操作. 一.创建保存密码的文件 1.在home文件夹,一般是 C:\Documents a ...

  9. map侧连接

    两个数据集中一个非常小,可以让小数据集存入缓存.在作业开始这些文件会被复制到运行task的节点上. 一开始,它的setup方法会检索缓存文件. 与reduce侧连接不同,Map侧连接需要等待参与连接的 ...

  10. python3爬虫03（find_all用法等）

    #read1.html文件# <html><head><title>The Dormouse's story</title></head># ...