Vueデータの追加と削除-フロントエンドQ&A-php.cn

Vueデータの追加と削除

WBOY

リリース： 2023-05-08 09:07:37

オリジナル

740 人が閲覧しました

Vue.js は非常に人気のあるフロントエンドフレームワークであり、その主な特徴は MVVM (Model-View-ViewModel) アーキテクチャパターンの使用です。 Vue.js のデータバインディングは最も重要な機能の 1 つであり、この機能によりデータとビューの同期を維持できます。

Vue.js では、追加、削除、確認、変更などの操作を簡単な方法で実行できます。この記事では、Vue.js でのデータの追加と削除の操作について説明します。

1. データの追加

Vue.js では、v-bind 命令と v-model 命令を使用してデータをバインドできます。 v-bind ディレクティブはデータを HTML 要素にバインドするために使用され、v-model はフォーム要素とデータを一緒にバインドするために使用されます。

データが追加されると、Vue.js が提供する Vue.set メソッドを使用してプロパティを動的に追加できます。同時に、Vue が $set メソッドを使用するときにこのプロパティを監視できることを確認できます。オブジェクト、多様性。

次に、データを追加する例を示します。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} ({{ item.age }})
      </li>
    </ul>
    <form>
      <input v-model="name" type="text" placeholder="Name">
      <input v-model="age" type="number" placeholder="Age">
      <button type="submit" @click.prevent="addItem">Add Item</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 },
        { name: "Jim", age: 45 }
      ],
      name: "",
      age: ""
    };
  },
  methods: {
    addItem() {
      this.items.push({
        name: this.name,
        age: this.age
      });
      this.name = "";
      this.age = "";
    }
  }
};
</script>

ログイン後にコピー

上の例では、v-for ディレクティブを使用してリストを表示します。フォームでは、v-model ディレクティブを使用して名前と年齢の値をバインドします。 [項目の追加] ボタンをクリックすると、addItem メソッドがトリガーされ、this.items.push() メソッドを通じて項目配列に新しいオブジェクトが追加され、フォームの入力ボックスがクリアされます。

2. データの削除

Vue.js でデータを削除する方法は、データを追加する方法と非常に似ており、Vue.js が提供する splice メソッドを使用して要素を削除できます。また、Vue がこの変更をリッスンしていることを確認してください。

以下はデータ削除の例です。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} ({{ item.age }})
        <button @click.prevent="removeItem(index)">Remove Item</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 },
        { name: "Jim", age: 45 }
      ]
    };
  },
  methods: {
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>

ログイン後にコピー

上の例では、v-for ディレクティブを使用してリストを表示します。各リスト項目に「項目を削除」ボタンを追加しました。ボタンをクリックすると、removeItem メソッドがトリガーされ、this.items.splice() メソッドを通じて対応するインデックスの配列項目が削除されます。

3. まとめ

一般に、Vue.js のデータの追加と削除の操作は非常に単純で、Vue.js が提供するメソッドを通じて簡単にデータを操作でき、Vue に任せることができます。 js はデータの変更をリッスンし、それによってビューを同期的に更新します。開発中は、さまざまなシナリオに応じて、さまざまな方法を使用してデータを追加および削除することができます。

以上がVueデータの追加と削除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。