这篇文章主要介绍了在vue中有什么按键修饰符,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
vue中的按键修饰符有:1、“.enter”,可捕获enter键;2、“.tab”,可捕获tab键;3、“.delete”,可捕获“删除”和“退格”按键;4、“.esc”,可捕获取消键;5、“.space”,可捕获空格键;6、“.up”等。
本教程操作环境:windows10系统、vue2.9.6版,DELL G3电脑。
在监听键盘事件时,我们经常需要查找常用按键对应的 code 值。Vue 可以在 v-on 上添加按键修饰符,用于监听按键事件
这里列出所有的按键修饰符别名:
.enter => // enter键 .tab => // tab键 .delete (捕获“删除”和“退格”按键) => // 删除键 .esc => // 取消键 .space => // 空格键 .up => // 上 .down => // 下 .left => // 左 .right => // 右
在我们平常登录功能的操作中,输入密码后会按下回车进行登录,这样就不需要在操作鼠标点击登录按钮了,那么这一功能在vue中是怎么实现的呢
我们做一个简单的添加数据功能,来演示这个案例:
<style> table{ width:760px; /* margin: 0 auto; */ border-collapse: collapse; } table td{ border: 1px solid black; width: .4rem; } </style> </head> <body> <div id="app"> <label for="">id</label> <input type="text" v-model="id"> <label for="">name</label> <input type="text" v-model="name"> <input type="button" value="添加" @click="add()"> <table> <thead> <tr> <th>id</th> <th>name</th> </tr> </thead> <tbody> <tr v-for="item in list"> <td>{{item.id}}</td> <td>{{item.name}}</td> </tr> </tbody> </table> </div> <script src="./js/vue.js"></script> <script> let vm = new Vue({ el:'#app', data:{ list:[ {id:1,name:'哈哈'} ], id:'', name:'' }, methods: { add(){ // 向数组的最后一位添加新的对象 this.list.push({id:this.id,name:this.name}) // 完成添加后清空文本框 this.id=this.name="" } } }) </script> </body>在vue中有什么按键修饰符