Powered by md-Blog  文 - 篇  访客 -

Vue.js按下回车Enter、退出Esc、删除退格键delete、空格space、Tab和方向键的按键绑定


  分类:Vue  / 
更新:2020-11-01 17:25:27  /  创建:2020-03-31 16:34:52
不要删除

参考绑定方法有:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
Demo.vue
<template>
  <div class="demo">
    <input 
      v-on:keyup.delete="deleted"
      v-on:keyup.enter="submit"
      v-on:keyup.esc="esc"
      placeholder="按键检测">
  </div>
</template>

<script>
export default {
  name: 'KeyTest',
  methods:{
    submit(){
      alert('你点击了回车~')
    },
    deleted(){
      alert('你点击了删除~')
    },
    esc(){
      alert('你点击了退出~')
    }
  }
}
</script>

其他事件处理

更多鼠标、组合按键参考官方文档:

https://cn.vuejs.org/v2/guide/events.html

不要删除

小站不易,感谢支持!