v-on:input を使用して Vue で入力ボックスの入力イベントを監視する方法

Vue は、Web 開発をより効率的かつシンプルにする人気の JavaScript フレームワークです。その中でも、v-on:input を使用して入力ボックスの入力イベントを監視することは共通の要件です。この記事では、Vue で v-on:input を使用して入力ボックスの入力イベントを監視する方法を詳しく紹介します。

1. v-on:input コマンド

v-on:input コマンドは、入力ボックスの入力イベントを監視するために使用される Vue のコマンドです。input、textarea、contenteditable を監視できます。およびその他の要素を達成するための入力イベント。

v-on:input ディレクティブの使用は非常に簡単で、監視する必要がある要素に v-on:input 属性をバインドし、Vue インスタンスで対応するメソッドを定義するだけです。

たとえば、次のコードでは、入力ボックスと、入力内容を表示する div 要素を定義します。 input 要素で v-on:input ディレクティブを使用して、入力ボックスにコンテンツが入力されたときに呼び出されるメソッドをバインドし、入力コンテンツをデータ内のメッセージ変数に更新します。 div 要素では、{{}} 補間を使用してデータ内のメッセージ変数をレンダリングします。

<div id="app">
  <input v-on:input="updateMessage">
  <div>{{message}}</div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: ''
    },
    methods: {
      updateMessage: function (event) {
        this.message = event.target.value
      }
    }
  })
</script>

2. v-model ディレクティブを使用してコードを簡素化します

v-on:input ディレクティブを使用して入力ボックスの入力イベントを監視できますが、実際の開発では、通常は、コードを簡素化するために v-model ディレクティブを使用します。

v-model ディレクティブは、v-on:input ディレクティブと value 属性を同時にバインドすることと同じです。したがって、input 要素で v-model ディレクティブを使用することで、上記のコード例を実装できます。

<div id="app">
  <input v-model="message">
  <div>{{message}}</div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: ''
    }
  })
</script>

v-model ディレクティブを使用した後は、データを更新するメソッドで updateMessage メソッドを定義する必要はなくなりました。Vue は入力ボックスの値をデータのメッセージ変数に自動的に更新します。

3. 他の入力イベントを監視する

入力イベントに加えて、Vue は変更、キーアップ、キーダウンなどの監視対象の他の入力イベントも提供します。 v-on:input ディレクティブを使用して監視するイベントを指定するときに、対応するイベント名を渡すことができます。

たとえば、次のコードでは、textarea 要素の変更イベントをリッスンし、ユーザーが入力を完了して要素を離れると、イベントがトリガーされます。 Vue インスタンス メソッドでは、event.target.value で表される値に基づいて、ユーザーが入力した内容が要件を満たしているかどうかを判断します。

<div id="app">
  <textarea v-on:change="checkInput"></textarea>
</div>

<script>
  var app = new Vue({
    el: '#app',
    methods: {
      checkInput: function (event) {
        if (event.target.value === '') {
          alert('输入内容不能为空！')
        } else {
          alert('输入内容为：' + event.target.value)
        }
      }
    }
  })
</script>

4. まとめ

Vue で v-on:input ディレクティブを使用すると、入力ボックスの入力イベントを監視する機能を簡単に実装できます。 v-model ディレクティブを使用してコードを簡素化します。入力イベントに加えて、Vue はユーザー入力を監視するためのさまざまな入力イベントも提供しており、特定のニーズに応じて選択できます。これらのスキルを習得すれば、より効率的に Vue の開発作業を完了できるようになると思います。

以上がv-on:input を使用して Vue で入力ボックスの入力イベントを監視する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。