Vue v-on

Volardev 編集部 April 28, 2026

バニラな JavaScript でのイベントハンドリングと同様に、Vue の v-on ディレクティブはブラウザに対して以下の情報を伝えます：

どのイベントを監視（リッスン）するか（click、keydown、mouseover など）
そのイベントが発生したときに何を実行するか

1. v-on の使用例

v-on をさまざまな イベント で使用する方法と、それらの イベント 発生時に実行される多様なコードの例を見ていきましょう。

注意： イベント発生時により高度なコードを実行するには、Vue メソッド（Methods） を導入する必要があります。Vue メソッドについては、本チュートリアルの次のページで解説します。

2. onclick イベント

v-on ディレクティブを使用すると、指定された イベント に基づいて特定のアクションを実行できます。要素がクリックされたときに処理を実行するには、v-on:click を使用します。

2.1 実装例：照明のスイッチ

<button> タグに v-on ディレクティブを使用して click イベントをリッスンしています。クリックが発生すると、lightOn データプロパティの値が true と false の間で切り替わり（トグル）、電球の背後にある黄色の <div> の表示・非表示が制御されます。

<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="img_lightBulb.svg">
  </div>
  <button v-on:click="lightOn = !lightOn">ライトを切り替える</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        // 初期状態は消灯
        lightOn: false
      }
    }
  })
  app.mount('#app')
</script>

3. oninput イベント

テキストフィールド内でのキー入力など、要素に対して インプット（Input） が行われた際にアクションを実行するには、v-on:input を使用します。

3.1 実装例：キーストロークのカウント

テキスト入力フィールドでの入力回数をカウントします。

<div id="app">
  <input v-on:input="inpCount++">
  <p>{{ '発生したインプットイベント数: ' + inpCount }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        inpCount: 0
      }
    }
  })
  app.mount('#app')
</script>

4. mousemove イベント

マウスポインタが要素の上を移動したときにアクションを実行するには、v-on:mousemove を使用します。

4.1 実装例：背景色の動的変更

マウスポインタが <div> 要素の上を移動するたびに、背景色をランダムに変更します。

<div id="app">
  <p>下のボックスにマウスポインタを合わせて動かしてください</p>
  <div v-on:mousemove="colorVal=Math.floor(Math.random()*360)"
       v-bind:style="{backgroundColor:'hsl('+colorVal+',80%,80%)'}">
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        // 初期の色相値
        colorVal: 50
      }
    }
  })
  app.mount('#app')
</script>

5. v-for ループ内での v-on の使用

v-on ディレクティブは、v-for ループの中でも使用可能です。各 イテレーション（反復） において、配列の各アイテムが v-on の値の中で利用できます。

5.1 実装例：リスト選択による画像切り替え

食べ物の配列に基づいてリストを表示し、各アイテムにクリックイベントを追加します。クリックすると、そのアイテムが持つURLを使用して画像のソースを更新します。

<div id="app">
  <img v-bind:src="imgUrl">
  <ol>
    <li v-for="food in manyFoods" v-on:click="imgUrl=food.url">
      {{ food.name }}
    </li>
  </ol>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        imgUrl: 'img_salad.svg',
        manyFoods: [
          {name: 'ブリトー', url: 'img_burrito.svg'},
          {name: 'サラダ', url: 'img_salad.svg'},
          {name: 'ケーキ', url: 'img_cake.svg'},
          {name: 'スープ', url: 'img_soup.svg'}
        ]
      }
    }
  })
  app.mount('#app')
</script>

6. v-on の省略記法（Shorthand）

v-on の省略記法（シンタックスシュガー）は、単に @ を使用することです。モダンな フロントエンド 開発では、この記法が最も一般的に使用されます。

6.1 実装例：@ 記法の使用

以下のように v-on: の代わりに @ を記述します。

<button @click="lightOn = !lightOn">ライトを切り替える</button>