Vue2.0开发之——Vue基础用法-事件绑定-按键修饰符(21)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • 什么是@keyup
  • @keyup.esc示例
  • @keyup.enter示例

二 什么是@keyup

@keyup(键盘事件)是按键松开，当指定的按键松开会触发的事件

事件代码 事件描述
@keyup.enter 回车按键松开
@keyup.left 左键按键松开
@keyup.right 右键按键松开
@keyup.up 上键按键松开
@keyup.down 下键按键松开
@keyup.delete 删除键松开
@keyup.esc esc键松开

三 @keyup.esc示例-输入框按ESC时清空输入框

3.1 布局代码

1
2
3
<div id="app">
     <input type="text" @keyup.esc="clearInput">
</div>

3.2 vue代码

1
2
3
4
clearInput(e){
        e.target.value=''
        console.log("clearInput")
},

3.3 效果图

四 @keyup.enter示例-输入框按enter键提交内容

4.1 布局代码

1
2
3
<div id="app">
     <input type="text" @keyup.enter="submit">
 </div>

4.2 vue代码

1
2
3
submit(){
      console.log('submit')
}

4.3 效果图

五 参考

Vue中文网-按键修饰符