이벤트 핸들링 - 키 수식어

사용자가 특정 키(키 조합)를 입력하였을때 이벤트가 발생하도록 설정

 

예제 코드(App.vue)

<template>
  키를 입력하였을때 이벤트 발생: 
  <input
    type="text"
    @keydown="handler" />
  <br /><br />
  Entaer 키를 입력하였을때 이벤트 발생: 
  
  <input
    type="text"
    @keydown.enter="handler2" />
  <br /><br />
  a 키를 입력하였을때 이벤트 발생: 
  <input
    type="text"
    @keydown.a="handler2" /> 
  <br /><br />
  키조합을(ctrl + a) 입력하였을때 이벤트 발생: 
  <input
    type="text"
    @keydown.ctrl.a="handler2" /> 
</template>
<script>
export default {
  methods: {
    handler(event){
      console.log(event);
      // Enter키를 입력하였을때 이벤트 출력
      if (event.key === 'Enter') {
        console.log('Enter!!');
      }
    },
    handler2(event){
      console.log(event);
      console.log(event.key);
    }
  }
}
</script>

 

브라우저 확인