vueリストページの追加、削除、変更、確認-フロントエンドQ&A-php.cn

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 サイトの他の関連記事を参照してください。