Vue学习之路第十九篇:按键修饰符的使用
程序员文章站
2024-01-07 19:24:28
1、我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件、或者按下ESC退出页面等各种各样的场景。在Vue中,可以通过键盘修饰符来实现这样的场景。 2、事例代码: 这里在车名的input框里添加keyup事件,即键盘按下抬起时触发;后面的“enter”即为按键修饰符,定义哪个按键会触发该 ......
1、我们工作中经常会有类似于这样的需求:按下enter键触发某个事件、或者按下esc退出页面等各种各样的场景。在vue中,可以通过键盘修饰符来实现这样的场景。
2、事例代码:
<body> <divi id="app"> 序号:<input type="text" v-model="idvalue"/> 车名:<input type="text" v-model="namevalue" @keyup.enter="add()"/> <p v-for="item in list"> 序号:{{item.id }} , 车名:{{ item.name }}<br/> </p> </div> <script type="text/javascript"> var vm = new vue({ el:"#app", data:{ idvalue:'', namevalue:'', list:[ {id:1,name:'奥迪'}, {id:2,name:'宝马'} ] }, methods:{ add(){ this.list.unshift({ id : this.idvalue, name : this.namevalue }); } } }) </script> </body>
这里在车名的input框里添加keyup事件,即键盘按下抬起时触发;后面的“enter”即为按键修饰符,定义哪个按键会触发该事件。所以当光标位于该input框时,按下enter键抬起就会触发事件执行add方法,并添加新数据展示在页面上。
3、除了enter键以外,vue还定义了以下按键修饰符:tab、
delete
(捕获“删除”和“退格”键)、esc、space、up、down、left、right;这些是官网提供的修饰符,但是实际进行操作的时候发现,几乎所有的键盘按键都可以用来作为修饰符,大家有空可以自己尝试一下,毕竟vue更新速度还是比较快的,真理还是要来自于实践。
4、除了使用以上方法,我们还可以使用keycode(键盘码)来作为修饰符使用。如:f2的键盘码为113,我们可以修改代码为:
车名:<input type="text" v-model="namevalue" @keyup.113="add()"/>
这时光标在input框时,我们按下再松开f2时也可以触发事件。
注:不管是使用键盘名称还是使用键盘码都要防止快捷键的冲突,快捷键冲突的时候会不起作用。
5、当然按键事件除了keup还有kedown等其他按键事件,大家有空的话可以尝试使用其他按键事件。
每天进步一点点!