Vue-Listenseite hinzufügen, löschen, ändern und überprüfen

Da Vue.js immer beliebter wird, wird die Nachfrage nach Vue-Anwendungen zwangsläufig steigen. Da die Bedeutung von Listenseiten in den meisten Webanwendungen immer weiter zunimmt, ist das Hinzufügen, Löschen und Ändern von Vue-Listenseiten nicht nur zu einer sehr wichtigen Anwendungsanforderung geworden, sondern auch zu einem der wichtigsten Dinge, die Vue-Lernende lernen sollten. In diesem Artikel wird erläutert, wie Sie mit Vue.js grundlegende Vorgänge zum Hinzufügen, Löschen, Ändern und Überprüfen auf Listenseiten ausführen.

Vorbereitung:

Bevor Sie mit diesem Artikel beginnen, stellen Sie bitte sicher, dass Sie über ausreichende Kenntnisse der Grundlagen von HTML und JavaScript verfügen, da wir zum Erstellen der Listenanwendung Vue.js, HTML und JavaScript verwenden werden.

Dieser Artikel behandelt die folgenden Themen:

1. Erstellen Sie eine Liste

3. Bearbeiten Sie einen Eintrag

1. Erstellen Sie eine Vue-Anwendung

Wir müssen Vue.js installieren. Es kann über CDN oder über den npm-Paketmanager installiert werden. Wenn Sie über ein CDN installieren möchten, können Sie es erhalten von: https://unpkg.com/vue@next/dist/vue.global.js. Wenn Sie mit dem npm-Paketmanager installieren möchten, können Sie im Terminal den folgenden Befehl verwenden:

npm install vue

Sobald die Installation abgeschlossen ist, können wir nun wie folgt eine Vue-Instanz erstellen:

const app = Vue.createApp({
});

Als nächstes definieren wir die Vorlage in der Instanz Daten, Methoden und berechnete Eigenschaften.

2. Erstellen Sie eine Liste

Wir verwenden die v-for-Anweisung, um die Listendaten zu durchlaufen. Angenommen, wir haben ein Array, das Listenelementdaten speichert. Wir können dieses Array wie folgt als Datenmodell in der Vue-Instanz deklarieren:

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' }
      ]
    }
  }
});

Jetzt müssen wir die v-for-Direktive in der Vorlage verwenden, um dieses Array zu durchlaufen und die Daten für jedes Element anzuzeigen. Dazu fügen wir der Vue-Vorlage den folgenden Code hinzu:

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

Der obige Code verwendet die v-for-Direktive, um das Datenarray zu durchlaufen und mithilfe des Schlüsselworts:key eine eindeutige Kennung für jedes Elementelement bereitzustellen.

Jetzt haben wir die Liste fertig erstellt.

3. Neue Elemente hinzufügen

Wir verwenden die von Vue bereitgestellte v-model-Direktive, um ein neues Listeneingabe- und Übermittlungsformular zu erstellen. Die v-model-Direktive ermöglicht die Bindung von Eingabewerten an Vue-Komponenten. Mit der v-model-Direktive verwenden wir im Allgemeinen Texteingabefelder und aktualisieren automatisch die bidirektionale Datenbindung.

Um ein neues Listenelement hinzuzufügen, müssen wir ein Formular anzeigen und neue Daten aus dem Formular sammeln. Wir erstellen das Formular mit Vue.js wie unten gezeigt:

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

Wir verwenden den Ereignismodifikator @submit.prevent für das Formular, sodass das Formular nie tatsächlich gesendet wird. Stattdessen löst es den Event-Handler aus, den wir an die Methode addItem gebunden haben. Diese Methode fügt dem Datenarray ein neues Element hinzu.

Wie ist die v-model-Direktive an das reservierte Eingabetextfeld gebunden? Wir müssen eine neue Variable newItem im Datenmodell der Vue-Komponente definieren, wie unten gezeigt: v-model指令来建立新的列表输入和提交表单。v-model指令允许绑定输入值到Vue组件中。使用v-model指令实际上是我们一般使用文本输入框的理解方式，它会自动更新双向数据绑定。

为了添加新的列表项，我们需要显示一个表单，并从该表单收集新数据。我们用Vue.js创建表单，如下所示：

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 = '';
    }
  }
});

我们在表单上使用了@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: '',
      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;
    }
  }
});

在addItem方法中，我们在数组的末尾插入一个新的项目对象，并为新的项目对象提供一个唯一的ID。添加项目后，我们将使用空字符串重置newItem。现在我们已经实现了向数组添加新条目的功能。

4、编辑条目

我们现在的目标是为每个项目添加一个编辑按钮，当点击该按钮时，可以修改项目的名称。实现这种编辑功能的方法是将v-model绑定到数据模型中的当前项并显示保存按钮。可以在每个项目旁边放一个编辑按钮，单击该按钮时切换到编辑模式。

首先，我们需要定义一个currentItem变量。该变量将指定当前正在编辑的项目。我们还需要定义editing变量，以便在编辑模式下隐藏显示条目名称，如下所示：

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

现在我们需要在每个项目元素中显示编辑按钮。当编辑按钮被单击时，我们需要切换到编辑模式，这样就可以开始编辑当前项目了。我们可以使用以下代码为每个项目设置编辑按钮：

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);
      }
    }
  }
});

我们通过使用v-if

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

In der Methode addItem fügen wir eine neue Variable ein Ende des Array-Projektobjekts und geben Sie eine eindeutige ID für das neue Projektobjekt an. Nachdem wir das Element hinzugefügt haben, setzen wir newItem mit einer leeren Zeichenfolge zurück. Jetzt haben wir die Funktionalität zum Hinzufügen neuer Elemente zu einem Array implementiert.

4. Elemente bearbeiten

Unser Ziel ist es nun, jedem Element eine Schaltfläche zum Bearbeiten hinzuzufügen. Wenn auf die Schaltfläche geklickt wird, kann der Name des Elements geändert werden. Diese Bearbeitungsfunktionalität wird erreicht, indem v-model an das aktuelle Element im Datenmodell gebunden und eine Schaltfläche zum Speichern angezeigt wird. Sie können neben jedem Element eine Bearbeitungsschaltfläche platzieren, die beim Klicken in den Bearbeitungsmodus wechselt.

Zuerst müssen wir eine currentItem-Variable definieren. Diese Variable gibt das Element an, das gerade bearbeitet wird. Wir müssen auch die Variable editing definieren, um den Eintragsnamen im Bearbeitungsmodus auszublenden, etwa so:

rrreee

Jetzt müssen wir die Schaltfläche „Bearbeiten“ in jedem Elementelement anzeigen. Wenn auf die Schaltfläche „Bearbeiten“ geklickt wird, müssen wir in den Bearbeitungsmodus wechseln, damit wir mit der Bearbeitung des aktuellen Projekts beginnen können. Wir können die Bearbeitungsschaltfläche für jedes Element mithilfe des folgenden Codes festlegen:

rrreee

Wir schalten das Fallback-Textelement um und bearbeiten das Texteingabefeld, um den Namen des Elements anzuzeigen oder auszublenden, indem wir den v-if verwenden Richtlinie. Wenn wir den Bearbeitungsmodus verwenden, geben Sie den Projektnamen in das Bearbeitungstextfeld ein oder bearbeiten Sie ihn. Der Bearbeitungsmodus kann durch Klicken auf die Schaltfläche „Speichern“ verlassen werden. 🎜🎜5. Elemente löschen🎜🎜Wir müssen jetzt eine Funktion zum Löschen von Elementen hinzufügen. Wir müssen für jedes Element eine Schaltfläche zum Löschen hinzufügen. Wenn Sie auf die Schaltfläche „Löschen“ klicken, löschen wir dieses Element aus dem Datenarray. Wir werden die Array.prototype.indexOf()-Methode von JavaScript verwenden, um Elemente zu suchen und zu löschen. 🎜rrreee🎜 Jetzt können wir jedem Element eine Schaltfläche zum Löschen hinzufügen. Wenn auf die Schaltfläche „Löschen“ geklickt wird, können wir die Methode deleteItem() aufrufen. 🎜rrreee🎜Wir haben gelernt, wie man mit Vue.js die Listenseite hinzufügt, löscht, ändert und überprüft. Die Einfachheit und Benutzerfreundlichkeit von Vue machen es zu einer sehr leistungsstarken Wahl, um die meisten Vorgänge für Listenanwendungen problemlos abzuwickeln. 🎜🎜Vue macht Code nicht nur leichter verständlich, sondern ermöglicht uns auch die schnelle Erstellung leistungsstarker Webanwendungen. Mithilfe von Vue.js ist das Erstellen einer Listenseite für jedes Projekt einfacher geworden. 🎜

Das obige ist der detaillierte Inhalt vonVue-Listenseite hinzufügen, löschen, ändern und überprüfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!