键盘事件

<!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. JavaScript事件模型及事件代理

    事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模 ...

  2. #define 只是字符替换

    可以使用 #define MAX 100 int main (int argc, char *argv[]) { printf("MAX is %d\n", MAX); ; } g ...

  3. (转)Xargs用法详解

    Xargs用法详解 原文:http://czmmiao.iteye.com/blog/1949225 简介之所以能用到这个命令,关键是由于很多命令不支持|管道来传递参数,而日常工作中有有这个必要,所以 ...

  4. Spark Mllib里的如何对两组数据用皮尔逊计算相关系数

    不多说,直接上干货! import org.apache.spark.mllib.stat.Statistics 具体,见 Spark Mllib机器学习实战的第4章 Mllib基本数据类型和Mlli ...

  5. PHP session变量的销毁

    1.何为session? 相当于一个客户端(可以是浏览器.app.ftp等其他,而且同一个浏览器多开几个又算是不同的客户端)对服务器的一个访问,这个期间服务器为此建立一个唯一的标示(session_i ...

  6. Centos 6.5 添加PHP5.6-7.1的源

    centOS6.5 安装后 自带的源中php是5.3版本的,对与php一些常用的框架而言 ,已经不能满足需求了: 使用下面的源 就可以更新到php7.1版本了. # rpm -Uvh http://r ...

  7. Duplicate Emails

    Write a SQL query to find all duplicate emails in a table named Person. +----+---------+ | Id | Emai ...

  8. Nginx 安装(CentOS )非yum安装

    Nginx 安装(CentOS ) 一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-d ...

  9. Spring 的AOP

    AOP:面向切面编程,相对于OOP面向对象的编程 Spring的AOP的存在的目的是为了解耦.AOP可以让一组类共享相同的行为.在OOP中只能通过继承类和实现接口,来使代码的耦合度增强,且类继承只能为 ...

  10. instanceof 关键字

    boolean = Object(类引用名) instanceof  Class(类名) 作用:判断符号左边的引用指向的对象是否是右边这个类的对象: