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)">

<script> export default { data() { return { username: "", changes: [] }; }, watch: { username(newVal, oldVal) { if (newVal !== oldVal) { this.changes.push({ before: oldVal, after: newVal }); } } } }; </script>

ログイン後にコピー

上記のコードでは、新しい changes を追加して記録します。 配列。入力ボックスの各変更。 watch オプションの handler 関数をわずかに変更し、入力ボックスの値が変化したときにトリガーされるようになりました。新しい値が古い値と等しくない場合、前の値と次の値をオブジェクトの形式で changes 配列に保存します。

複数の入力ボックスの値を記録する

実際の開発では、通常、複数の入力ボックスの値を監視する必要があります。この場合、同じ形式のオブジェクトを使用して、入力ボックスのすべての変更を保存できます。オブジェクト内の属性名は入力ボックスの ID または名前で、属性値は入力ボックスが変更される前後の値を含むオブジェクトです。

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

    <label for="email">邮箱:</label>
    <input id="email" v-model="formData.email">
    <p>邮箱: {{ formData.email }}</p>

    <pre v-text="JSON.stringify(changes)">

<script> export default { data() { return { formData: { username: "", email: "" }, changes: {} }; }, watch: { formData: { handler(newVal, oldVal) { // 遍历对象 formData for (const key in newVal) { // 如果 newValue 和 oldValue 不同 if (newVal[key] !== oldVal[key]) { // 新增一个属性，属性名为输入框的名称或 ID if (!this.changes[key]) { this.$set(this.changes, key, {}); } // 设置属性值， 属性值包含 before 和 after 两个字段 this.changes[key].before = oldVal[key]; this.changes[key].after = newVal[key]; } } }, // 深度监听对象中的属性，当数据属性的值发生改变时，handler 中 callBack 函数将被执行。 deep: true } } }; </script>

ログイン後にコピー