一、键盘修饰符
在JavaScript事件中除了前面所说的事件,还有键盘事件,也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难,所以Vue为最常用的键盘事件提供了别名:
- enter:回车键
- tab:制表键
- delete:含delete和backspace键
- esc:返回键
- space: 空格键
- up:向上键
- down:向下键
- left:向左键
- right:向右键
注意: 键盘修饰符须添加的标签中绑定keyup事件名,之后加上键盘修饰符
例如: @keyup.修饰符="方法" => @keyup.enter="handle"
v-on:keyup.修饰符="方法" => `v-on:keyup.enter="handle"`
二、enter修饰符
-
.enter是点击
enter
键触发绑定方法 -
例子
<div id="app"> <form action="" method="post"> <div> <input type="text" v-model="uname"/> </div> <div> <input type="password" v-model="pwd" @keyup.enter="handleSubmit"/> </div> <div> <input type="button" @click="handleSubmit" value="提交"> </div> </form> </div> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { uname:'', pwd:'' }, methods: { handleSubmit:function(){ console.log(this.uname,this.pwd); } } }) </script>
三、delete修饰符
- .delete是点击
delete
键触发绑定方法 - 例子
<div id="app"> <form action="" method="post"> <div> <input type="text" v-model="uname" v-on:keyup.delete="clearContent"/> </div> <div> <input type="password" v-model="pwd" @keyup.enter="handleSubmit"/> </div> <div> <input type="button" @click="handleSubmit" value="提交"> </div> </form> </div> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { uname:'', pwd:'' }, methods: { handleSubmit:function(){ console.log(this.uname,this.pwd); }, clearContent:function(){ this.uname = ''; } } }) </script>
- .delete是点击
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步