标签：默认 查看 关键字 键盘按键 alert org vue 详细介绍 back
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。键盘事件的关键字为 keyup 。
下面将详细介绍4种方式的使用。
不需要任何修饰符，键盘上任意按键按下后弹起时触发。
<div id="app"> <label> 输入框：<input type="text" v-on:keyup="show"> </label> </div> <script> var vm = new Vue({ el: ‘#app‘, methods: { show() { alert(‘键盘事件已被触发‘) } }, }) </script>
vue提供了一些常用的键盘码别名，供我们使用，例如：enter、delete、tab、esc、space、up、down、left、right，具体参考vue管网。
下面我们以enter为例，它表示键盘上的回车键，下面示例在 input 输入框中按回车键就会触发事件。
<div id="app"> <label> 输入框：<input type="text" v-on:keyup.enter="show"> </label> </div> <script> var vm = new Vue({ el: ‘#app‘, methods: { show() { alert(‘键盘事件已被触发‘) } }, }) </script>
每一个键盘按键都对应一个数字，一般也会将这个数字称之为键盘码值，使用keyCode大全查看按键与数字的对应关系。
下面我们以 F2 为例，它对应的键盘码值为 113，下面示例在 input 输入框中按 F2 键就会触发事件。
<div id="app"> <label> 输入框：<input type="text" v-on:keyup.113="show"> </label> </div> <script> var vm = new Vue({ el: ‘#app‘, methods: { show() { alert(‘键盘事件已被触发‘) } }, }) </script>
vue默认提供的按键修饰符别名不够多，如果使用数字代替使得记忆不方便，因此我们可以自定义一些全局的键盘码别名，例如：F2 用来表示 113。
<div id="app"> <label> 输入框：<input type="text" v-on:keyup.f2="show"> </label> </div> <script> // 自定义全局按键修饰符 Vue.config.keyCodes.f2 = 113 var vm = new Vue({ el: ‘#app‘, methods: { show() { alert(‘键盘事件已被触发‘) } }, }) </script>
转载请注明出处：https://www.cnblogs.com/unlockth/p/13485325.html
标签：默认 查看 关键字 键盘按键 alert org vue 详细介绍 back
原文地址：https://www.cnblogs.com/unlockth/p/13485325.html
