vueリストページの追加、削除、変更、確認

Vue.js の人気が高まるにつれて、Vue アプリケーションの需要も必然的に増加します。ほとんどの Web アプリケーションでリスト ページの重要性が高まり続けるにつれて、Vue リスト ページの追加、削除、変更はアプリケーションの非常に重要な要件になっているだけでなく、Vue 学習者が学ぶべき最も重要なことの 1 つでもあります。この記事では、Vue.js を使用してリスト ページで基本的な追加、削除、変更、確認操作を実行する方法を紹介します。

準備:

Vue.js、HTML、JavaScript を使用してリストを作成するため、この記事を開始する前に、HTML と JavaScript の基本を十分に理解していることを確認してください。アプリケーションプログラム。

この記事では次のトピックについて説明します:

1. Vue アプリケーションの作成

2. リストの作成

3. 新しいエントリの追加

4. エントリの編集

5. エントリの削除

1. Vue アプリケーションの作成

Vue.js をインストールする必要があります。 CDN または npm パッケージ マネージャーを介してインストールできます。 CDN 経由でインストールする場合は、https://unpkg.com/vue@next/dist/vue.global.js から入手できます。 npm パッケージ マネージャーを使用してインストールする場合は、ターミナルで次のコマンドを使用できます:

npm install vue

インストールが完了したら、次のように Vue インスタンスを作成できます:

const app = Vue.createApp({
});

次に、インスタンス内のテンプレート、データ、メソッド、および計算されたプロパティを定義します。

2. リストの作成

v-for 命令を使用してリスト データをループします。リスト項目データを格納する配列があるとします。次のように、この配列を Vue インスタンスのデータ モデルとして宣言できます。

const app = Vue.createApp({
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ]
    }
  }
});

次に、テンプレートで v-for ディレクティブを使用して、この配列を反復処理し、各項目のデータを表示する必要があります。これを行うには、次のコードを Vue テンプレートに追加します。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

上記のコードは、v-for ディレクティブを使用してデータ配列をループし、keyword:key を使用してデータ配列に一意の識別子を提供します。各項目要素。

これでリストの作成が完了しました。

3. 新しいエントリの追加

Vue が提供する v-model ディレクティブを使用して、新しいリスト入力および送信フォームを作成します。 v-model ディレクティブを使用すると、入力値を Vue コンポーネントにバインドできます。 v-model ディレクティブの使用は、実際にはテキスト入力ボックスの一般的な使用方法であり、双方向データ バインディングが自動的に更新されます。

新しいリスト項目を追加するには、フォームを表示し、フォームから新しいデータを収集する必要があります。 Vue.js を使用して次のようにフォームを作成します。

<template>
  <div>
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItem" placeholder="Add a new item">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

フォーム上で @submit.prevent イベント修飾子を使用して、フォームが実際に送信されないようにします。代わりに、addItem メソッドにバインドしたイベント ハンドラーをトリガーします。このメソッドは、データ配列に新しい項目を追加します。

ここv-model命令は入力予約済みテキスト ボックスにどのようにバインドされますか?次のように、Vue コンポーネントのデータ モデルで新しい変数 newItem を定義する必要があります。

const app = Vue.createApp({
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      this.items.push({id: this.items.length + 1, name: this.newItem});
      this.newItem = '';
    }
  }
});

addItem メソッドの最後にそれを挿入します。新しいプロジェクト オブジェクトの配列を取得し、新しいプロジェクト オブジェクトに一意の ID を与えます。項目を追加した後、newItem を空の文字列でリセットします。これで、配列に新しい項目を追加する機能が実装されました。

4. エントリの編集

現在の目標は、各項目に編集ボタンを追加し、ボタンをクリックすると項目の名前を変更できるようにすることです。この編集機能は、v-model をデータ モデル内の現在の項目にバインドし、保存ボタンを表示することによって実現されます。各項目の横に編集ボタンを配置し、クリックすると編集モードに切り替わります。

まず、currentItem 変数を定義する必要があります。この変数は、現在編集中の項目を指定します。また、次のように、編集モードでエントリ名の表示を非表示にする editing 変数を定義する必要があります。

const app = Vue.createApp({
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ],
      newItem: '',
      editing: false,
      currentItem: null
    }
  },
  methods: {
    addItem() {
      this.items.push({id: this.items.length + 1, name: this.newItem});
      this.newItem = '';
    },
    editItem(item) {
      this.editing = true;
      this.currentItem = item;
    },
    saveItem() {
      this.editing = false;
      this.currentItem = null;
    }
  }
});

次に、すべての item 要素に編集ボタンを表示する必要があります。編集ボタンをクリックしたら、現在のプロジェクトの編集を開始できるように編集モードに切り替える必要があります。次のコードを使用して各項目の編集ボタンを設定できます:

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <span v-if="!editing || currentItem !== item">{{ item.name }}</span>
      <span v-else><input type="text" v-model="currentItem.name"></span>
      <button @click="editItem(item)" v-if="!editing">Edit</button>
      <button @click="saveItem()" v-if="editing">Save</button>
    </li>
  </ul>
</template>

v-if ディレクティブを使用して、フォールバック テキスト要素を切り替え、テキスト入力ボックスを編集して項目を表示または非表示にします。名前。編集モードを使用する場合は、編集テキスト ボックスにプロジェクト名を入力または編集します。編集モードは、「保存」ボタンをクリックすると終了できます。

5. アイテムの削除

次に、アイテムを削除する関数を追加する必要があります。各項目に削除ボタンを追加する必要があります。削除ボタンをクリックすると、この項目をデータ配列から削除します。 JavaScript の Array.prototype.indexOf() メソッドを使用して項目を検索し、削除します。

const app = Vue.createApp({
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ],
      newItem: '',
      editing: false,
      currentItem: null
    }
  },
  methods: {
    addItem() {
      this.items.push({id: this.items.length + 1, name: this.newItem});
      this.newItem = '';
    },
    editItem(item) {
      this.editing = true;
      this.currentItem = item;
    },
    saveItem() {
      this.editing = false;
      this.currentItem = null;
    },    
    deleteItem(item) {
      const index = this.items.indexOf(item);
      if (index > -1) {
        this.items.splice(index, 1);
      }
    }
  }
});

これで、各項目に削除ボタンを追加できます。削除ボタンをクリックすると、deleteItem() メソッドを呼び出すことができます。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <span v-if="!editing || currentItem !== item">{{ item.name }}</span>
      <span v-else><input type="text" v-model="currentItem.name"></span>
      <button @click="editItem(item)" v-if="!editing">Edit</button>
      <button @click="saveItem()" v-if="editing">Save</button>
      <button @click="deleteItem(item)">Delete</button>
    </li>
  </ul>
  <div>
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItem" placeholder="Add a new item">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

Vue.js を使用してリスト ページを追加、削除、変更、確認する方法を学習しました。 Vue はシンプルで使いやすいため、リスト アプリケーションのほとんどの操作を簡単に処理できる非常に強力な選択肢となります。

Vue を使用すると、コードが理解しやすくなるだけでなく、強力な Web アプリケーションを迅速に作成できるようになります。 Vue.js を使用すると、あらゆるプロジェクトのリスト ページの作成が簡単になりました。

以上がvueリストページの追加、削除、変更、確認の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。