【Vue2】clickイベント @clickとv-on:clickどっちを使う？

2024年2月18日Vue2


Warning: Undefined array key 2 in /home/god48/god48.com/public_html/wp-content/themes/luxech/functions.php on line 99

Warning: Undefined array key 4 in /home/god48/god48.com/public_html/wp-content/themes/luxech/functions.php on line 104

Warning: Undefined array key 6 in /home/god48/god48.com/public_html/wp-content/themes/luxech/functions.php on line 109

kamiです。

今回はvue.jsでclickイベントで発火のさせ方についてです。
vueでは「@click」と「v-on:click」の二つがクリックイベントがあります。
どちらの構文も同じ動作を持つため、使用するのは好みの問題です。
通常、@click の方が短くて直感的であり、一般的によく使用されます。

@clickイベント

<button @click="handleClick">Click me</button> は、ボタンがクリックされたときに handleClick メソッドを呼び出すことを示します。

<button @click="handleClick">Click me</button>

全体のサンプルコードです。
ボタンクリックでscriptタグ内のhandleClickが呼ばれます。

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

v-on:clickイベント

<button v-on:click="handleClick">Click me</button> は、ボタンがクリックされたときに handleClick メソッドを呼び出すことを示します。

<button v-on:click="handleClick">Click me too</button>

全体のサンプルコードです。
ボタンクリックでscriptタグ内のhandleClickが呼ばれます。

<template>
  <div>
    <button v-on:click="handleClick">Click me too</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

Vue2

Posted by kami