vue 入力は前後の値を変更します

Vue は、応答性の高いコンポーネントを簡単に作成できる人気の JavaScript フレームワークです。 WEB 開発では、コンポーネントの入力ボックスは最も一般的な要素の 1 つです。多くのシナリオでは、開発者は入力ボックスの値を追跡して処理する必要があります。この記事では、Vue で入力ボックスの変更された値を処理する方法について説明します。

入力ボックスを聞く

Vue には、入力ボックスの値を監視するさまざまな方法が用意されています。最も一般的な方法は、v-model を使用することです。 v-model ディレクティブは双方向バインディングを実装します。つまり、入力ボックスへの変更はコンポーネント インスタンスのデータ属性に反映され、データ属性の値が変更されると、入力ボックス対応する値も自動的に更新されます。

次は、v-model を使用してテキスト入力ボックスの値を監視する方法を示す簡単な例です:

<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username">
    <p>用户名: {{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  }
};
</script>

上記の例では、次を使用します。 v-model はテキスト入力ボックスをバインドし、コンポーネント インスタンスの username データ属性を維持します。ユーザーが入力ボックスに値を入力すると、username データ属性が自動的に更新され、テンプレート内の差異式 {{ username }} もそれに応じて更新されます。

変更前と変更後の入力ボックスの値を記録する

一部のシナリオでは、変更前と変更後の入力ボックスの値を知る必要があります。たとえば、フォームでは、ユーザーが行った変更を追跡し、後で使用できるようにこれらの変更を changes 配列に保存できるようにしたいと考えています。

Vue では、watch を使用してデータ属性の変更を監視できます。データ属性の値が変更された場合、handler 関数を使用していくつかの操作を実行できます。

次のコードを使用して、単一の入力ボックスの変更前と変更後の値を記録できます:

<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username">
    <p>用户名: {{ username }}</p>
    <pre v-text="JSON.stringify(changes)">