Vue--按键修饰符(逐个学习按键修饰符)
在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on
在监听键盘事件时添加按键修饰符:
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
记住所有的 keyCode
比较困难,所以 Vue 为最常用的按键提供了别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit"> <!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名:
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space(空格键)
.up
.down
.left
.right
我们也可以自定义按键
<html>
<head>
<title>Vue按键修饰符</title>
<script src="vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="example">
<ul>
<li v-for="item in items">
{{ item.name }}
</li>
</ul>
<button @keyup.f1="del()">删除</button>
</div>
<script>
Vue.config.keyCodes.f1 = 112;
new Vue({
el:"#example",
data:{
items:[
{name:"Hello"},
{name:"world"},
{name:"喜欢"},
{name:"happy"}
]
},
methods:{
del(){
this.items.pop();
}
}
})
</script>
甚至可以这样添加多个
Vue.config.keyCodes = {
f1:112,
// 可以添加多个
............
............
............ }
Vue--按键修饰符(逐个学习按键修饰符)的更多相关文章
- Vue--事件处理(逐个学习事件修饰符)
.capture .self .once 主要学习这三个事件修饰符的用法先来看看capture capture即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素.若有多个该修饰符,则 ...
- Vue.js-03:第三章 - 事件修饰符的使用
一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...
- 有关static静态修饰符的学习心得
初学java,面对着这个static修饰符,愣是琢磨了两天时间,还在今天琢磨透了,现在将悟到的东西记录下来: 1.static修饰符表示静态修饰符,其所修饰的内容(变量.方法.代码块暂时学到这三种)统 ...
- vue--键盘修饰符以及自定义键盘修饰符
键盘修饰符以及自定义键盘修饰符 1.vue键盘修饰符[了解即可] 地址:https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4 ...
- 对于形式参数只能用final修饰符,其它任何修饰符都会引起编译器错误
在Java中修饰符总共有一下几种: 1.访问控制修饰符 分别有:public private protected,缺省 2.其它修饰符 分别有:abstract,final,stati ...
- Java从入门到放弃——05.修饰符static,final,权限修饰符
本文目标 static final: 权限修饰符:public,private,protected,缺省 1.static 静态修饰符,被static修饰的变量或者方法会被加载进静态区内存,不需要创建 ...
- 初学总结--------Java修饰符与修饰关键字(且叫修饰关键字)
Java中有类,有成员变量,有成员方法,有局部变量.他们分别能用什么来修饰? 目前学习到的类,有普通类和内部类. 一.修饰普通类: 1.public 每个文件中只有一个类能被public修饰,表示可 ...
- js-ES6学习笔记-修饰器
1.修饰器对类的行为的改变,是代码编译时发生的,而不是在运行时.这意味着,修饰器能在编译阶段运行代码. 2. function testable(target) { target.isTestable ...
- 接口中字段的修饰符:public static final(默认不写) 接口中方法的修饰符:public abstract(默认不写)abstract只能修饰类和方法 不能修饰字段
abstract只能修饰类和方法 不能修饰字段
随机推荐
- jmeter接口测试与接口测试工具
接口测试与接口测试工具 1,什么是接口? 接口,Application Programming Interface(API) 通俗的讲 就是HTTP请求 2,什么是接口测试? 接口测试测试组件间接口的 ...
- Promise和async/await
1.promise对象 promise 对象有三种状态:pending(进行中).fulfilled(已成功)和 rejected(已失败).promise 对象的状态改变,只有两种可能:从 pend ...
- Java Web学习笔记之---EL和JSTL
Java Web学习笔记之---EL和JSTL (一)EL (1)EL作用 Expression Language(表达式语言),目的是代替JSP页面中复杂的代码 (2)EL表达式 ${变量名} ( ...
- 秒杀Servlce接口设计
秒杀Servlce接口设计 1.创建service包,创建SecKillServlce业务接口 SecKillServlce.Java package org.secKill.service;/** ...
- NOIp 图论算法专题总结 (1):最短路、最小生成树、最近公共祖先
系列索引: NOIp 图论算法专题总结 (1) NOIp 图论算法专题总结 (2) NOIp 图论算法专题总结 (3) 最短路 Floyd 基本思路:枚举所有点与点的中点,如果从中点走最短,更新两点间 ...
- php面试专题---MYSQL查询语句优化
php面试专题---MYSQL查询语句优化 一.总结 一句话总结: mysql的性能优化包罗甚广: 索引优化,查询优化,查询缓存,服务器设置优化,操作系统和硬件优化,应用层面优化(web服务器,缓存) ...
- CDN:BootCDN 项目列表-摘录-20180405
ylbtech-CDN:BootCDN 项目列表-20180405 1.返回顶部 1. 2. 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 1. http://www.boo ...
- Jenkins+Gitlab+自动化测试配置持续集成
Jenkins安装在win7上 GitLab安装在docker上 需求:本地提交自动化测试代码在gitlab上后,jenkins自动构建,拉下新提交的自动化代码,并且运行 参考的链接: https:/ ...
- Vue过滤器:全局过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化. 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 过滤器应该被添加在 JavaScr ...
- [BZOJ4151]The Cave
Solution: 假设现在在点1,有许多形如 (x, y, z) 的限制条件,那么对于一组限制,必须先走到 x, y 的 \(\frac{z-dis(x, y)}{2}\) 级祖先,叫这些点为限 ...