【11】vue.js — 自定义键盘事件
2017-09-07 16:38
525 查看
vue提供了一些键盘事件我们可以直接向下面这样来使用,@keydown.c表示按下
上面代码执行的是vue提供的键盘事件,但我们想用
c时触发,@keydown.17表示按下
CTRL时触发。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <input type="text" @keydown.c="show"/> <!-- CTRL键的keyCode值:17 --> <input type="text" @keydown.17="show"/> </div> </body> <script> window.onload = function(){ var vm = new Vue({ el: '#box', data: { a: 'blue' }, methods: { show: function(){ alert(1); } } }) } </script> </html>
上面代码执行的是vue提供的键盘事件,但我们想用
@keydown.ctrl代表按下
ctrl键时就必须得自定义了,下面来介绍下vue是如何自定义键盘事件的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <!-- CTRL键的keyCode值:17 --> <input type="text" @keydown.myenter="show"/> </div> </body> <script> Vue.directive('on').keyCodes.ctrl = 17; //定义了ctrl键盘 Vue.directive('on').keyCodes.myenter=13; //定义了Enter键盘 window.onload = function(){ var vm = new Vue({ el: '#box', data: { a: 'blue' }, methods: { show: function(){ alert(1); } } }) } </script> </html>
相关文章推荐
- 浅谈Vue.js 组件中的v-on绑定自定义事件理解
- Vue.js自定义事件的表单输入组件方法
- Vue.js 组件中的v-on绑定自定义事件理解
- vue.js的键盘事件
- vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件
- vue.js的事件处理器v-on:click
- JS获取键盘事件 兼容FF,IE
- js中获取键盘事件
- android自定义软键盘名字以及监听键盘事件
- js-事件2_键盘事件 oDiv.style.left=oDiv.offsetLeft-10+"px";
- JS键盘事件
- vue27-2.0-自定义键盘事件
- JS键盘监听事件的键盘码
- 九、Qt Creator中鼠标键盘事件的处理实现自定义鼠标指针
- [js高手之路] vue系列教程 - 事件专题(4)
- 学习前端js核心Vue 之 directives(自定义命令) transition (过渡动画 js) 个人备忘笔记
- vue.js学习 自定义过滤器使用(1)
- JS键盘事件监听
- cocos2dx js 自定义监听事件