vue事件_按键修饰符 / @keyup.enter/.esc / 回车、返回 / 更多修饰符

vue指令-v-on按键修饰符

目标: 给键盘事件, 添加修饰符, 增强能力

• 语法:
  • @keyup.enter - 监测回车按键
  • @keyup.esc - 监测返回按键

更多修饰符

<template>
  <div>
      <!-- @keyup.enter  -  监测回车按键   -->
      按回车键发送内容<input @keyup.enter="sendMsg" type="text">
      <br>
      <!-- @keyup.esc  -  监测返回按键   -->
      按Esc键清空内容<input @keyup.esc="clearMsg" v-model="msg"  type="text">
  </div>
</template>

<script>
export default {
    data () {
        return {
            msg:"",
        }
    },
methods: {
    sendMsg(){
        console.log('你有新的消息，请注意查收');
    },
    clearMsg(){
        console.log('清空您的消息');
        this.msg = ""
    }
}
}
</script>

<style>

</style>

总结: 多使用事件修饰符, 可以提高开发效率, 少去自己判断过程