Úvod do vykresľovania zoznamov vo Vue

Jednou z najbežnejších úloh pri vývoji webu je vykresľovanie zoznamov údajov. Vue to rieši pomocou v-pre smernice. Preskúmate, čo je direktíva v-for, ako odstrániť položky zo zoznamu a ako vykresliť zoznamy pomocou kľúčov.

Čo je smernica v-for vo Vue?

The v-pre Direktíva je jednou z direktív Vue, ktorá vám umožňuje vykresľovať zoznamy s minimálnym kódom JavaScript. The v-pre smernica funguje podobne ako for slučka v JavaScripte a môže iterovať cez polia a objekty na vykreslenie položiek v zozname.

Na využitie v-pre poskytnite pole, ktoré chcete iterovať v údajov majetok z Objekt možností vo Vue.

Napríklad:

<šablóna>
<ul>
<liv-pre="meno v menách">{{ názov }}li>
ul>
šablóna>
<skript>
exportovať predvolené {
 data() {
 vrátiť {
 mená: ['John', 'Doe', 'James'],
 };
 },
};
skript>

Vyššie uvedený blok kódu zobrazuje príklad aplikácie Vue, ktorá využíva v-pre direktíva iterovať cez mená pole, ktoré je poskytnuté v údajov nehnuteľnosť.

v-pre má hodnotu nastavenú na výraz s dvoma časťami: premenná iterácie (

názov) a mená pole v-pre ukazuje na. Premenná iterácie platí pre každú z nich názov v mená pole a zobrazí názov.

Vue vytvára nový Model objektu dokumentu (DOM) prvok pre každého názov v mená pole a vykreslí ho na webovej stránke.

Ak mená zmeny poľa (napríklad sa pridá nový názov alebo sa odstráni starý), Vue automaticky aktualizuje virtuálny DOM a znova vykreslí zoznam tak, aby odrážal aktualizované údaje.

Vue tiež ponúka spôsob, ako získať index prvku v zozname.

<liv-pre="(názov, index) v menách">{{ meno }} -- {{ index }}li>

Vyššie uvedený kód zobrazuje syntax na zobrazenie indexu každého z nich názov v mená pole.

Môžete tiež využiť v-pre direktíva na precyklenie rozsahu čísel:

<liv-pre="číslo v 10">Vue je peknáli>

Vyššie uvedený kód vykreslí zoznam s textom Vue je pekná desaťkrát. The v-pre Direktíva môže tiež prechádzať rozsahom čísel na opakované zobrazenie údajov alebo vykonanie operácie. V tomto prípade, č iteračná premenná sa používa na prístup k aktuálnej položke v zozname.

Ako odstrániť položky zo zoznamu vo Vue

Používateľom môžete povoliť odstraňovanie položiek zo zoznamov vo vašej webovej aplikácii. Táto funkcia je užitočná pri vytváraní aplikácií, ako je zoznam úloh.

Môžete použiť spájať JavaScript metóda (to je jeden zo spôsobov odstránenie položiek z polí) na odstránenie položky zo zoznamu vo Vue.

array.splice (startIndex, numToRemove, newElements)

Metóda spájania môže pridávať alebo odstraňovať položky z poľa. Metóda spájania preberá parametre v nasledujúcom poradí:

1. The startIndex Parameter nastavuje index, pri ktorom sa má začať upravovať pole.
2. numToRemove označuje počet položiek, ktoré chcete z poľa odstrániť.
3. Nakoniec, newElements parameter, ktorý môžete použiť na pridanie prvkov do poľa. Ak nie sú špecifikované žiadne prvky, spojiť () odstráni iba prvky z poľa.

Ak chcete použiť metódu spájania na odstránenie položky zo zoznamu vo Vue, musíte poznať index tejto položky. Jedným zo spôsobov, ako to dosiahnuť, je prejsť index ako argument pre metódu, ktorá rieši odstránenie položky.

Napríklad môžete vedľa každého názvu v poli pridať tlačidlo, ktoré spustí metódu na odstránenie položky, keď na ňu používateľ klikne:

<šablóna>
<ul>
<liv-pre="(názov, index) v menách">
 {{ meno }} -- {{ index }}
<tlačidlo @kliknite="removeItem (index)">Odstrániťtlačidlo>
li>
ul>
šablóna>

The index parameter nám umožňuje prístup k indexu každého z nich názov v poli, ktoré tento program odovzdá ako argument do Odstrániť položku metóda. The Odstrániť položku metóda potom môže použiť spájať spôsob odstránenia a názov z mená pole:

<skript>
exportovať predvolené {
 data() {
 vrátiť {
 mená: ['John', 'Doe', 'James'],
 };
 },
 metódy: {
 removeItem (index) {
 toto.názvy.splice (index, 1);
 }
}
};
skript>

Vyššie uvedený skript používa spájať metóda na odstránenie jedného mena zo zoznamu vykreslených mien. Tým sa automaticky aktualizuje zoznam v používateľskom rozhraní, aby odrážal aktualizované pole.

Ako vykresliť zoznamy pomocou kľúčov vo Vue

The kľúč atribút je jedinečný atribút, ktorý Vue používa na sledovanie identity každej položky v zozname. Keď sa položka v zozname zmení, pomocou kľúč atribút Vue dokáže rýchlo aktualizovať DOM bez opätovného vykresľovania celého zoznamu.

Pozrime sa na príklad vykreslenia zoznamu pomocou kľúčov vo Vue:

<šablóna>
<div>
<ul>
<liv-pre="meno v menách":kľúč="meno.id">
 {{meno.meno }}
<tlačidlo @kliknite="removeItem (name.id)">Odstrániťtlačidlo>
li>
ul>
div>
šablóna>
<skript>
exportovať predvolené {
 data() {
 vrátiť {
 mená: [
 { id: 1, meno: "John"},
 { id: 2, name: "Doe"},
 { id: 3, name: "James"},
 ],
 };
 },
 metódy: {
 removeItem (kľúč) {
 toto.názvy.splice (kľúč - 1, 1);
 },
 },
};
skript>

V tomto príklade máte zoznam položiek s jedinečnými id vlastnosti. Blok kódu používa kľúč atribút s v-pre na sledovanie identity každej položky v zozname. To umožňuje Vue efektívne aktualizovať DOM, keď sa zoznam zmení.

Ak by ste odstránili položku zo zoznamu, Vue by aktualizoval DOM bez toho, aby ste museli znova vykresľovať celý zoznam. Je to preto, že Vue uchováva identitu každej položky v zozname a môže aktualizovať iba položky, ktoré sa zmenili.

The kľúč atribút by mal byť jedinečným identifikátorom pre každú položku v zozname. Toto môže byť id vlastnosť alebo akýkoľvek iný jedinečný identifikátor, ktorý možno použiť na sledovanie položky.

Pomocou kľúč atribút s v-pre smernica pomáha vyhnúť sa problémom s vykresľovaním. Napríklad pri odstraňovaní mien Vue používa kľúč atribút zachovať poradie položiek v zozname.

Smernice Vue sú nevyhnutné

Tu ste prebrali základy vykresľovacích zoznamov vo Vue, vrátane odstraňovania položiek zo zoznamov a vykresľovania zoznamov pomocou kľúčov. Pochopením týchto pojmov môžete vytvoriť citlivé rozhrania, ktoré spracovávajú komplexné zoznamy údajov.

Vue má množstvo smerníc na rôzne účely vrátane podmieneného vykresľovania, viazania udalostí a viazania údajov. Pochopenie týchto smerníc vám môže pomôcť vytvoriť efektívne interaktívne webové aplikácie.