文章目录
1. 按键事件参数(keyup)1.1 说明1.2 完整示例 2. 按键修饰符别名2.1 修饰符别名2.2 示例1. 按键事件参数(keyup)
1.1 说明
作用:
将键盘的按键事件和vue实例 绑定
语法
写法:v-on:keyup
简写为@:keyup
示例
<input type="button" @keyup="warn" />
1.2 完整示例
代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="/vue/2.2.2/vue.min.js"></script></head><body><div id="app"><input type="button" value="弹出警告" @keyup="warn" /></div><script src="/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",methods: {warn: function() {alert("警告,警告!!!")}}})</script></body></html>
结果显示 焦点移动到按钮上,键盘任意键,弹出弹窗
2. 按键修饰符别名
2.1 修饰符别名
.enter
.tab
.delete
(捕获 “删除” 和 “退格” 键).esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
2.2 示例
将按键事件参数中完整示例的代码做如下修改:
<div id="app"><input type="button" value="弹出警告" @keyup.enter="warn" /></div>
焦点移动到按钮上,此时只有按回车键才会弹出弹窗