ホームページ > 記事 > ウェブフロントエンド > v-on ディレクティブを使用して Vue でフォーム入力イベントを処理する方法
v-on ディレクティブを使用して Vue でフォーム入力イベントを処理する方法
Vue は、ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Vue では、v-on ディレクティブを使用して、ボタンのクリックやキーボード入力などのフォーム入力イベントを監視できます。この記事では、v-on ディレクティブを使用して Vue でフォーム入力イベントを処理する方法を紹介し、具体的なコード例を示します。
最初に、v-on ディレクティブを使用してボタン クリック イベントをリッスンする方法について説明します。クリックされるとメソッドをトリガーするボタンがあるとします。
HTML テンプレート コードは次のとおりです:
<div id="app"> <button v-on:click="handleClick">点击我</button> </div>
Vue インスタンス コードは次のとおりです:
new Vue({ el: '#app', methods: { handleClick: function() { alert('按钮被点击了!'); } } });
上記のコードでは、v-on ディレクティブを使用してクリックをバインドします。ボタンのイベントの後に、トリガーするメソッドの名前が続きます。
次に、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 を通じてユーザーが入力した値を取得できます。
最後に、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 サイトの他の関連記事を参照してください。