本教程操作环境: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>
登录后复制
这个时候是这可以通过点击添加按钮去添加的
在原生js中有提供了 keyup 按键抬起事件,那么可以把方法中心的 add 方法绑定到 keyup 抬起事件中,看看能否达到想要的效果,因为我们是在输入完 name 之后去敲回车,所以把 keyup 事件绑定到我们的 name 文本框中
<input type="text" v-model="name" @keyup="add()">
登录后复制
可以看到,当输入完name之后还没有敲击回车键,就已经自动添加了,这时候就需要用到按键修饰符了
<!-- enter:回车键 --> <input type="text" v-model="name" @keyup.enter="add()">
登录后复制
当输入完成后,并且文本框还在获得焦点的同时,在敲回车的时候,才会执行add函数:
除了 enter 之外,Vue官网还提供了以下修饰符:
为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
那么除了Vue提供的这些按键之外,其他按键可不可以使用呢,我们拿 f4 举个例子
<input type="text" v-model="name" @keyup.f4="add()">
登录后复制
这是Vue在2.5.0新增的自动匹配按键修饰符,但是我们一般只使用功能键去充当按键修饰符,
尽量不要使用要输入的键
【相关推荐:《vue.js教程》】
以上就是在vue中按键修饰符有哪些的详细内容,更多请关注Work网其它相关文章!