Vue.js のキー修飾子を使う

概要

本記事では、Vue.jsで用意されているキー修飾子の使用方法を紹介していきます。

キー修飾子の種類

以下のキー修飾子が用意されている。
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

実装方法

今回は、上記のうち.enter、.spaceを例にします。
指定したキーを押下した時に、関数を呼び出す事ができます。

index.html

<div id="app">
  // エンターキーを押した時にアラートを表示
  <input type="text" v-on:keyup.enter="alert">
</div>

index.js

new Vue({
  el: '#app',
  methods: {
    alert() {
      alert("アラート！");
    }
  }
})

キー修飾子は繋げて書くこともできる。

index.html

<div id="app">
  // エンターキー、スペースキーを押した時にアラートを表示
  <input type="text" v-on:keyup.enter.space="alert">
</div>

index.js

new Vue({
  el: '#app',
  methods: {
    alert() {
      alert("アラート！");
    }
  }
})