v-on ディレクティブを使用して Vue でフォーム入力イベントを処理する方法

v-on ディレクティブを使用して Vue でフォーム入力イベントを処理する方法

Vue は、ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Vue では、v-on ディレクティブを使用して、ボタンのクリックやキーボード入力などのフォーム入力イベントを監視できます。この記事では、v-on ディレクティブを使用して Vue でフォーム入力イベントを処理する方法を紹介し、具体的なコード例を示します。

1. ボタン クリック イベントのリッスン

最初に、v-on ディレクティブを使用してボタン クリック イベントをリッスンする方法について説明します。クリックされるとメソッドをトリガーするボタンがあるとします。

HTML テンプレート コードは次のとおりです:

<div id="app">
  <button v-on:click="handleClick">点击我</button>
</div>

Vue インスタンス コードは次のとおりです:

new Vue({
  el: '#app',
  methods: {
    handleClick: function() {
      alert('按钮被点击了！');
    }
  }
});

上記のコードでは、v-on ディレクティブを使用してクリックをバインドします。ボタンのイベントの後に、トリガーするメソッドの名前が続きます。

2. テキスト ボックスの入力イベントを監視する

次に、v-on ディレクティブを使用してテキスト ボックスの入力イベントを監視する方法を紹介します。テキスト ボックスがあり、ユーザーがテキスト ボックスに入力するとメソッドがトリガーされるとします。

HTML テンプレート コードは次のとおりです:

<div id="app">
  <input v-on:input="handleChange" type="text" placeholder="请输入内容">
</div>

Vue インスタンス コードは次のとおりです:

new Vue({
  el: '#app',
  methods: {
    handleChange: function(event) {
      console.log(event.target.value);
    }
  }
});

上記のコードでは、v-on ディレクティブを使用して入力をバインドしますテキスト ボックスのイベント。その後にトリガーするメソッドの名前が続きます。また、このメソッドでは、event.target.value を通じてユーザーが入力した値を取得できます。

3. キーボード イベントのリッスン

最後に、v-on コマンドを使用してキーボード イベントをリッスンする方法を紹介します。入力ボックスがあり、ユーザーが Enter キーを押すとメソッドがトリガーされるとします。

HTML テンプレート コードは次のとおりです:

<div id="app">
  <input v-on:keyup.enter="handleEnter" type="text" placeholder="按下回车键">
</div>

Vue インスタンス コードは次のとおりです:

new Vue({
  el: '#app',
  methods: {
    handleEnter: function() {
      alert('回车键被按下了！');
    }
  }
});

上記のコードでは、v-on ディレクティブを使用してキーアップをバインドします。キーボードのイベント、および .enter 修飾子は、監視されるキー値が Enter キー (キー コードは 13) であることを指定します。この後に、トリガーされるメソッドの名前が続きます。

概要

上記の例を通じて、v-on ディレクティブを使用して Vue でフォーム入力イベントを処理する方法を学びました。 v-on:click を使用してボタンのクリック イベントをリッスンし、v-on:input を使用してテキスト ボックスの入力イベントをリッスンし、v-on:keyup.enter を使用してキーボードの入力イベントをリッスンできます。 v-on ディレクティブを使用すると、フォーム入力イベントを簡単に処理できます。

Vue では、v-on は @ と省略できることに注意してください。たとえば、@click は v-on:click を表し、@input は v-on:input を表し、@keyup.enter は v-on を表します。 :keyup.入力してください。私たちは個人の好みに基づいて、どの記述方法を使用するかを選択できます。

この記事が、v-on 命令を使用して Vue でフォーム入力イベントを処理するのに役立つことを願っています。ご質問がございましたら、メッセージを残してご相談ください。

以上がv-on ディレクティブを使用して Vue でフォーム入力イベントを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。