键盘事件

<!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. 屏蔽“您目前使用的Discuz!程序有新版本发布,请及时升级！”提示

    在/discuz/source/admincp目录下找到文件:admincp_main.php 找到第49行: if($_G['uid'] && $_G['member']['allo ...

  2. 浅谈堆-Heap（一）

    应用场景和前置知识复习 堆排序 排序我们都很熟悉,如冒泡排序.选择排序.希尔排序.归并排序.快速排序等,其实堆也可以用来排序,严格来说这里所说的堆是一种数据结构,排序只是它的应用场景之一 Top N的 ...

  3. Axure7.0注册码 Axure7.0序列号 Axure7.0License key

    很多同学安装了Axure7.0,但找不到注册码(license key).以前网上流传的Axure6.5的注册码不能用了.下面整理几个可用的Axure7.0注册码分享给大家,祝大家使用愉快,做出更多牛 ...

  4. ElasticSearch搜索demo

    ElasticSearch版本:1.4.1 分词:ik jdk:1.7.67 开发工具:Eclipse 系统:win7 忙活了几天,使用ES做成,就是页面有点丑,demo页面如下: 1.搜索主页 2. ...

  5. Xcode警告忽略

    Xcode中 cmd+B 之后总会出现各种各样的警告,对于一个对代码有洁癖的人,这种情况很难忍,接下来我们用些特殊手段强制消除这些警告  一.忽略源文件中的警告 使用编译器宏来操作 #pragma c ...

  6. li浮动 第二行第一个位置空白

    li浮动 第二行第一个位置空白:解决办法 li加上 vertical-align:bottom;overflow:hidden; 一行字多了 省略号代替: text-overflow: ellipsi ...

  7. 使用JS实现图片轮播（前后首尾相接）

    最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...

  8. HTTPS与SSL(一)

    1.  HTTPS HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版 ...

  9. Android使用文件管理器打开指定文件夹，浏览里面的内容

    Android下可以打开一些文件,带有.doc 等后缀的文件网上一般都有解释,这个写一个使用文件管理器打开指定文件夹的 private void openAssignFolder(String pat ...

  10. 父类和子类以及super关键字

    super和this关键字的特点类似:super代表的是父类对象的引用. 当子父类的成员出现同名时,可以通过super来进行区分. 子类的构造方法中,通过super关键字调用父类的构造方法. publ ...