Vue.js

[Vue.js初心者へ] キー修飾子でイベントを発火しよう!

キー修飾子

キー修飾子は、キーボードのDOMイベントの修飾子です。

実行例

コード

index.html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <input type="text" v-on:keyup="myAlert">
  <input type="text" v-on:keyup.enter="myAlert">
  <input type="text" v-on:keyup.space="myAlert">
  <input type="text" v-on:keyup.enter.space="myAlert">
</div>

<script language="javascript" type="text/javascript">
  var app = new Vue({
    el: '#app',
    data: {},
    methods: {
      myAlert() {
        alert('白猫がいるよ!');
      }
    }
  })
</script>

index.html

  <input type="text" v-on:keyup="myAlert">

入力箇所で何かキーボードを押すと発火してイベントが実行されます。
methodsのmyAlert関数が実行されます。

  <input type="text" v-on:keyup.enter="myAlert">

入力箇所で「enter」キーを押すと発火してイベントが実行されます。

  <input type="text" v-on:keyup.space="myAlert">

入力箇所で「space」キーを押すと発火してイベントが実行されます。

  <input type="text" v-on:keyup.enter.space="myAlert">

入力箇所で「enter」 or 「space」キーを押すと発火してイベントが実行されます。

実行結果