Úvod do vykreslování seznamů ve Vue

Jedním z nejběžnějších úkolů při vývoji webu je vykreslování seznamů dat. Vue to řeší pomocí v-pro směrnice. Prozkoumáte, co je direktiva v-for, jak odstranit položky ze seznamu a jak vykreslit seznamy pomocí klíčů.

Co je směrnice v-for ve Vue?

The v-pro Direktiva je jednou z direktiv Vue, která vám umožňuje vykreslovat seznamy s minimálním kódem JavaScript. The v-pro direktiva funguje podobně jako for smyčka v JavaScriptu a může iterovat přes pole a objekty k vykreslení položek v seznamu.

Chcete-li využít v-pro direktivu, poskytněte pole, které chcete iterovat v data vlastnictvím Objekt Options ve Vue.

Například:

<šablona>
<ul>
<liv-pro="jméno ve jménech">{{ název }}li>
ul>
šablona>
<skript>
exportovat výchozí {
 data() {
 vrátit se {
 jména: ['John', 'Doe', 'James'],
 };
 },
};
skript>

Blok kódu výše zobrazuje příklad aplikace Vue, která využívá v-pro direktiva iterovat přes jména pole, které je k dispozici v data vlastnictví.

v-pro má hodnotu nastavenou na výraz se dvěma částmi: iterační proměnná (

název) a jména pole v-pro ukazovat na. Proměnná iterace platí pro každou z nich název v jména pole a zobrazí název.

Vue vytvoří nový Objektový model dokumentu (DOM) prvek pro každého název v jména pole a vykreslí jej na webové stránce.

Pokud jména změny pole (například je přidán nový název nebo je odstraněn starý), Vue automaticky aktualizuje virtuální DOM a znovu vykreslí seznam tak, aby odrážel aktualizovaná data.

Vue také nabízí způsob, jak získat index prvku v seznamu.

<liv-pro="(jméno, index) ve jménech">{{ jméno }} -- {{ index }}li>

Výše uvedený kód znázorňuje syntaxi pro zobrazení indexu každého z nich název v jména pole.

Můžete také využít v-pro direktiva pro procházení rozsahu čísel:

<liv-pro="číslo v 10">Vue je pěknáli>

Výše uvedený kód vykreslí seznam s textem Vue je pěkná desetkrát. The v-pro Direktiva může také procházet rozsahem čísel a opakovaně zobrazovat data nebo provádět operaci. V tomto případě je č iterační proměnná se používá pro přístup k aktuální položce v seznamu.

Jak odstranit položky ze seznamu ve Vue

Uživatelům můžete povolit odstraňovat položky ze seznamů ve vaší webové aplikaci. Tato funkce je užitečná při vytváření aplikací, jako je seznam úkolů.

Můžete použít spoj JavaScript metoda (to je jeden ze způsobů odstranění položek z polí) k odstranění položky ze seznamu ve Vue.

array.splice (startIndex, numToRemove, newElements)

Metoda splice může přidat nebo odebrat položky z pole. Metoda spojování přebírá parametry v následujícím pořadí:

1. The startIndex parametr nastavuje index, od kterého se má začít upravovat pole.
2. numToRemove označuje počet položek, které chcete z pole odstranit.
3. Konečně, newElements parametr, který můžete použít k přidání prvků do pole. Pokud nejsou specifikovány žádné prvky, spoj () odstraní pouze prvky z pole.

Chcete-li použít metodu spojení k odstranění položky ze seznamu ve Vue, musíte znát index této položky. Jedním ze způsobů, jak toho dosáhnout, je projít index jako argument pro metodu, která zpracovává odstranění položky.

Můžete například přidat tlačítko vedle každého názvu v poli, které spustí metodu odstranění položky, když na ni uživatel klikne:

<šablona>
<ul>
<liv-pro="(jméno, index) ve jménech">
 {{ jméno }} -- {{ index }}
<knoflík @klikněte="removeItem (index)">Odstranitknoflík>
li>
ul>
šablona>

The index Parametr nám umožňuje přístup k indexu každého z nich název v poli, které tento program předá jako argument do removeItem metoda. The removeItem metoda pak může použít spoj způsob odstranění a název z jména pole:

<skript>
exportovat výchozí {
 data() {
 vrátit se {
 jména: ['John', 'Doe', 'James'],
 };
 },
 metody: {
 removeItem (index) {
 toto.jména.splice (index, 1);
 }
}
};
skript>

Výše uvedený skript používá spoj metoda k odstranění jednoho jména ze seznamu vykreslených jmen. Tím se automaticky aktualizuje seznam v uživatelském rozhraní, aby odrážel aktualizované pole.

Jak vykreslit seznamy pomocí klíčů ve Vue

The klíč atribut je jedinečný atribut, který Vue používá ke sledování identity každé položky v seznamu. Když se položka v seznamu změní, pomocí klíč atribut Vue může rychle aktualizovat DOM bez opětovného vykreslování celého seznamu.

Podívejme se na příklad vykreslení seznamu s klíči ve Vue:

<šablona>
<div>
<ul>
<liv-pro="jméno ve jménech":klíč="name.id">
 {{name.name }}
<knoflík @klikněte="removeItem (name.id)">Odstranitknoflík>
li>
ul>
div>
šablona>
<skript>
exportovat výchozí {
 data() {
 vrátit se {
 jména: [
 { id: 1, jméno: "John"},
 { id: 2, name: "Doe"},
 { id: 3, name: "James"},
 ],
 };
 },
 metody: {
 removeItem (klíč) {
 toto.názvy.splice (klíč - 1, 1);
 },
 },
};
skript>

V tomto příkladu máte seznam položek s jedinečnými id vlastnosti. Blok kódu používá klíč atribut s v-pro direktiva pro sledování identity každé položky v seznamu. To umožňuje Vue efektivně aktualizovat DOM, když se seznam změní.

Pokud byste odstranili položku ze seznamu, Vue by aktualizoval DOM, aniž by musel znovu vykreslovat celý seznam. Je to proto, že Vue uchovává identitu každé položky v seznamu a může aktualizovat pouze položky, které se změnily.

The klíč atribut by měl být jedinečný identifikátor pro každou položku v seznamu. To může být id vlastnost nebo jakýkoli jiný jedinečný identifikátor, který lze použít ke sledování položky.

Za použití klíč atribut s v-pro direktiva pomáhá vyhnout se problémům s vykreslováním. Například při odstraňování jmen Vue používá klíč atribut zachovat pořadí položek v seznamu.

Směrnice Vue jsou zásadní

Zde jste probrali základy vykreslování seznamů ve Vue, včetně odstraňování položek ze seznamů a vykreslování seznamů pomocí klíčů. Pochopením těchto pojmů můžete vytvořit citlivá rozhraní, která zpracovávají složité seznamy dat.

Vue má nepřeberné množství direktiv pro různé účely, včetně podmíněného vykreslování, vázání událostí a vázání dat. Pochopení těchto direktiv vám může pomoci vytvořit efektivní interaktivní webové aplikace.