vue でイベントをタグにバインドする方法

Vue.js で v-on ディレクティブを使用してラベル イベントをバインドします。手順は次のとおりです。 イベントをバインドするラベルを選択します。 v-on ディレクティブを使用して、イベントのタイプとイベントの処理方法を指定します。ディレクティブ値で呼び出す Vue メソッドを指定します。

Vue のタグ イベント バインディング

Vue.js では、v-on # を渡すことができます。 ## ディレクティブは、DOM イベントを Vue インスタンスのメソッドにバインドします。

構文:

<code><标签名 v-on:事件="方法名" other-props="...">...</标签名></code>

具体的な手順:

1. イベントの宛先となるラベルを選択します。 be binding: イベントをリッスンする必要がある要素を決定します。
2. v-on ディレクティブを追加します。 v-on ディレクティブを使用して、イベント タイプとイベントの処理方法を指定します。たとえば、v-on:click はクリック イベントをバインドするために使用されます。
3. メソッド名を指定: v-on ディレクティブの値で呼び出す Vue メソッドを指定します。メソッド名は、Vue インスタンス内のメソッドである必要があります。

例:

次の例は、クリック イベント ハンドラーをバインドする方法を示しています。

<code class="html"><button v-on:click="handleClick">点击我</button></code>

<code class="javascript">// Vue 实例
const app = new Vue({
  methods: {
    handleClick() {
      console.log("按钮被点击了！");
    }
  }
});</code>

ボタンがクリックされると、

handleClick メソッドが呼び出され、コンソールにメッセージが出力されます。

注:

イベント名はハイフン形式 (例: #) ではなく、キャメルケース (例:
• v-on:click) に従う必要があります。 ##v-on:on-click)。 Vue は、
v-on:onClick
• の代わりに v-on:click など、小文字を使用してイベントをバインドします。 修飾子が必要なイベント (
v-on:click.stop
• など) をバインドする場合は、イベント名の後にピリオド (.) と修飾子を追加できます。

以上がvue でイベントをタグにバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。