Eine Einführung in das Listen-Rendering in Vue

Eine der häufigsten Aufgaben in der Webentwicklung ist das Rendern von Datenlisten. Vue erledigt dies mit Hilfe des v-für Richtlinie. Sie erfahren, was die v-for-Direktive ist, wie Sie Elemente aus einer Liste entfernen und wie Sie Listen mit Schlüsseln rendern.

Was ist die V-for-Direktive in Vue?

Der v-für Die Direktive ist eine der Direktiven von Vue, mit der Sie Listen mit minimalem JavaScript-Code rendern können. Der v-für Die Direktive funktioniert ähnlich wie die for Schleife in JavaScript und kann über Arrays und Objekte iterieren, um Elemente in einer Liste darzustellen.

Um die zu nutzen v-für Geben Sie in der Direktive ein Array an, über das Sie iterieren möchten Daten Eigentum der Optionsobjekt in Vue.

Zum Beispiel:

<Vorlage>
<ul>
<liv-für=„Name in Namen“>{{ Name }}li>
ul>
Vorlage>
<Skript>
Standard exportieren {
 Daten() {
 zurückkehren {
 Namen: ['John', 'Doe', 'James'],
 };
 },
};
Skript>

Der obige Codeblock zeigt ein Beispiel einer Vue-App, die das verwendet

v-für Direktive zum Durchlaufen der Namen Array, das im bereitgestellt wird Daten Eigentum.

v-für hat einen Wert, der auf einen Ausdruck mit zwei Teilen festgelegt ist: der Iterationsvariablen (Name) und das Namen Array v-für verweist auf. Die Iterationsvariable enthält jeweils Name im Namen Array und zeigt das an Name.

Vue schafft ein neues Dokumentobjektmodell (DOM) Element für jedes Name im Namen Array und rendert es auf der Webseite.

Wenn die Namen Bei Array-Änderungen (z. B. wenn ein neuer Name hinzugefügt oder ein alter entfernt wird) aktualisiert Vue automatisch das virtuelle DOM und rendert die Liste neu, um die aktualisierten Daten widerzuspiegeln.

Vue bietet auch eine Möglichkeit, den Index eines Elements in einer Liste abzurufen.

<liv-für=„(Name, Index) in Namen“>{{ name }} -- {{ index }}li>

Der obige Code zeigt die Syntax zum Anzeigen des jeweiligen Index Name im Namen Array.

Sie können auch die nutzen v-für Direktive zum Durchlaufen eines Zahlenbereichs:

<liv-für=„Anzahl in 10“>Vue ist schönli>

Der obige Code rendert eine Liste mit dem Text Vue ist schön zehn Mal. Der v-für Die Direktive kann auch einen Zahlenbereich durchlaufen, um wiederholt Daten anzuzeigen oder eine Operation auszuführen. In diesem Fall ist die Num Die Iterationsvariable wird verwendet, um auf das aktuelle Element in der Liste zuzugreifen.

So entfernen Sie Elemente aus einer Liste in Vue

Sie können Benutzern erlauben, Elemente aus Listen in Ihrer Web-App zu entfernen. Diese Funktion ist nützlich, wenn Sie Apps wie eine To-Do-Liste erstellen.

Du kannst den... benutzen spleißen JavaScript-Methode (das ist eine der Möglichkeiten Entfernen von Elementen aus Arrays), um ein Element aus einer Liste in Vue zu entfernen.

array.splice (startIndex, numToRemove, newElements)

Mit der Splice-Methode können Elemente zu einem Array hinzugefügt oder daraus entfernt werden. Die Spleißmethode übernimmt die Parameter in der folgenden Reihenfolge:

1. Der Startindex Der Parameter legt den Index fest, an dem mit der Änderung des Arrays begonnen werden soll.
2. numToRemove gibt die Anzahl der Elemente an, die Sie aus dem Array entfernen möchten.
3. Endlich, das newElements Parameter, mit dem Sie dem Array Elemente hinzufügen können. Wenn keine Elemente angegeben sind, spleißen() entfernt nur Elemente aus dem Array.

Um die Splice-Methode zum Entfernen eines Elements aus einer Liste in Vue zu verwenden, müssen Sie den Index dieses Elements kennen. Eine Möglichkeit, dies zu erreichen, besteht darin, das zu bestehen Index als Argument für eine Methode, die das Entfernen des Elements übernimmt.

Sie können beispielsweise neben jedem Namen im Array eine Schaltfläche hinzufügen, die eine Methode zum Entfernen des Elements auslöst, wenn ein Benutzer darauf klickt:

<Vorlage>
<ul>
<liv-für=„(Name, Index) in Namen“>
 {{ name }} -- {{ index }}
<Taste @klicken=„removeItem (index)“>EntfernenTaste>
li>
ul>
Vorlage>

Der Index Parameter gibt uns Zugriff auf den Index jedes einzelnen Name im Array, das dieses Programm als Argument an den übergibt Gegenstand entfernen Methode. Der Gegenstand entfernen Methode kann dann die verwenden spleißen Methode zum Entfernen eines Name von dem Namen Array:

<Skript>
Standard exportieren {
 Daten() {
 zurückkehren {
 Namen: ['John', 'Doe', 'James'],
 };
 },
 Methoden: {
 RemoveItem (Index) {
 this.names.splice (index, 1);
 }
}
};
Skript>

Das obige Skript verwendet die spleißen Methode zum Entfernen eines Namens aus der Liste der gerenderten Namen. Dadurch wird die Liste in der Benutzeroberfläche automatisch aktualisiert, um das aktualisierte Array widerzuspiegeln.

So rendern Sie Listen mit Schlüsseln in Vue

Der Taste Attribut ist ein eindeutiges Attribut, das Vue verwendet, um die Identität jedes Elements in der Liste zu verfolgen. Wenn sich ein Element in der Liste ändert, können Sie mit Hilfe des Taste Mit dem Attribut Vue kann das DOM schnell aktualisiert werden, ohne dass die gesamte Liste neu gerendert werden muss.

Schauen wir uns ein Beispiel für das Rendern einer Liste mit Schlüsseln in Vue an:

<Vorlage>
<div>
<ul>
<liv-für=„Name in Namen“:Taste=„name.id“>
 {{ Name Name }}
<Taste @klicken=„removeItem (name.id)“>EntfernenTaste>
li>
ul>
div>
Vorlage>
<Skript>
Standard exportieren {
 Daten() {
 zurückkehren {
 Namen: [
 { id: 1, name: „John“},
 { id: 2, name: „Doe“},
 { id: 3, name: „James“},
 ],
 };
 },
 Methoden: {
 removeItem (Schlüssel) {
 this.names.splice (Schlüssel - 1, 1);
 },
 },
};
Skript>

In diesem Beispiel haben Sie eine Liste eindeutiger Elemente Ausweis Eigenschaften. Der Codeblock verwendet die Taste Attribut mit dem v-für -Anweisung, um die Identität jedes Elements in der Liste zu verfolgen. Dadurch kann Vue das DOM effizient aktualisieren, wenn sich die Liste ändert.

Wenn Sie ein Element aus der Liste entfernen würden, würde Vue das DOM aktualisieren, ohne die gesamte Liste neu rendern zu müssen. Dies liegt daran, dass Vue die Identität jedes Elements in der Liste speichert und nur die Elemente aktualisieren kann, die sich geändert haben.

Der Taste Das Attribut sollte eine eindeutige Kennung für jedes Element in der Liste sein. Dies kann ein sein Ausweis Eigenschaft oder eine andere eindeutige Kennung, die zur Verfolgung des Artikels verwendet werden kann.

Verwendung der Taste Attribut mit dem v-für Die Direktive hilft, Rendering-Probleme zu vermeiden. Beim Entfernen der Namen verwendet Vue beispielsweise die Taste Attribut, um die Reihenfolge der Elemente in der Liste beizubehalten.

Vue-Anweisungen sind unerlässlich

Hier haben Sie die Grundlagen des Renderns von Listen in Vue behandelt, einschließlich des Entfernens von Elementen aus Listen und des Renderns von Listen mit Schlüsseln. Wenn Sie diese Konzepte verstehen, können Sie reaktionsfähige Schnittstellen erstellen, die komplexe Datenlisten verarbeiten.

Vue verfügt über eine Vielzahl von Anweisungen für verschiedene Zwecke, darunter bedingtes Rendering, Ereignisbindung und Datenbindung. Das Verständnis dieser Anweisungen kann Ihnen dabei helfen, effiziente interaktive Web-Apps zu erstellen.