Sissejuhatus Vue loendi renderdamisse

Üks levinumaid ülesandeid veebiarenduses on andmeloendite renderdamine. Vue tegeleb sellega rakenduse abil v-eest direktiiv. Saate uurida, mis on v-for direktiiv, kuidas loendist üksusi eemaldada ja kuidas loendeid klahvidega renderdada.

Mis on Vue direktiiv v-for?

The v-eest direktiiv on üks Vue direktiividest, mis võimaldab teil renderdada loendeid minimaalse JavaScripti koodiga. The v-eest direktiiv toimib sarnaselt for-ga silmus JavaScriptis ja saab loendis üksuste renderdamiseks korrata massiive ja objekte.

Et kasutada v-eest direktiiv, esitage massiiv, mida soovite itereerida andmeid vara Vue suvandite objekt.

Näiteks:

<malli>
<ul>
<liv-eest="nimi nimedes">{{ nimi }}li>
ul>
malli>
<stsenaarium>
ekspordi vaikimisi {
 andmed() {
 return {
 nimed: ['John', 'Doe', 'James'],
 };
 },
};
stsenaarium>

Ülaltoodud koodiplokk kujutab näidet Vue rakendusest, mis kasutab v-eest käsk itereerida üle nimed massiivi, mis on esitatud andmeid vara.

v-eest väärtuseks on seatud kaheosaline avaldis: iteratsioonimuutuja (nimi) ja nimed massiivi v-eest osutab. Iteratsioonimuutuja kehtib iga nimi aastal nimed massiivi ja kuvab nimi.

Vue loob uue Dokumendiobjekti mudel (DOM) element iga jaoks nimi aastal nimed massiivi ja renderdab selle veebilehel.

Kui nimed massiivi muudatused (näiteks lisatakse uus nimi või eemaldatakse vana nimi), värskendab Vue automaatselt virtuaalset DOM-i ja renderdab loendi uuesti, et kajastada värskendatud andmeid.

Vue pakub ka võimalust loendis oleva elemendi indeksi hankimiseks.

<liv-eest="(nimi, register) nimedes">{{nimi }} -- {{ register }}li>

Ülaltoodud kood kujutab süntaksit igaühe indeksi kuvamiseks nimi aastal nimed massiivi.

Võite kasutada ka v-eest käsk tsükli läbimiseks arvude vahemikus:

<liv-eest="number 10-st">Vue on kenali>

Ülaltoodud kood renderdab tekstiga loendi Vue on kena kümme korda. The v-eest käsk võib ka arvude vahemikku läbida, et korduvalt andmeid kuvada või toimingut sooritada. Sel juhul on nr iteratsioonimuutujat kasutatakse loendi praegusele elemendile juurdepääsuks.

Kuidas eemaldada üksusi Vue loendist

Saate lubada kasutajatel teie veebirakenduse loenditest üksusi eemaldada. See funktsioon on kasulik rakenduste koostamisel nagu ülesannete loend.

Võite kasutada splaiss JavaScripti meetod (see on üks viise üksuste eemaldamine massiividest) üksuse eemaldamiseks Vue loendist.

array.splice (startIndex, numToRemove, newElements)

Splaissimismeetod võib massiivi üksusi lisada või sealt eemaldada. Splaissimismeetod võtab parameetrid järgmises järjekorras:

1. The startIndex parameeter määrab indeksi, millest alustada massiivi muutmist.
2. numToRemove näitab üksuste arvu, mida soovite massiivist eemaldada.
3. Lõpuks, uued elemendid parameeter, mida saate kasutada massiivi elementide lisamiseks. Kui elemente pole määratud, splaiss() eemaldab massiivist ainult elemendid.

Selleks, et kasutada liitmismeetodit üksuse Vue loendist eemaldamiseks, peate teadma selle üksuse registrit. Üks viis selle saavutamiseks on läbida indeks argumendina meetodile, mis käsitleb üksuse eemaldamist.

Näiteks saate massiivi iga nime kõrvale lisada nupu, mis käivitab meetodi üksuse eemaldamiseks, kui kasutaja sellel klõpsab:

<malli>
<ul>
<liv-eest="(nimi, register) nimedes">
 {{nimi }} -- {{ register }}
<nuppu @klõpsa="removeItem (indeks)">Eemaldanuppu>
li>
ul>
malli>

The indeks parameeter annab meile juurdepääsu igaühe indeksile nimi massiivi, mille see programm annab argumendina edasi eemalda üksus meetod. The eemalda üksus meetodit saab seejärel kasutada splaiss eemaldamise meetod a nimi alates nimed massiiv:

<stsenaarium>
ekspordi vaikimisi {
 andmed() {
 return {
 nimed: ['John', 'Doe', 'James'],
 };
 },
 meetodid: {
 removeItem (indeks) {
 this.names.splice (indeks, 1);
 }
}
};
stsenaarium>

Ülaltoodud skript kasutab splaiss meetod ühe nime eemaldamiseks renderdatud nimede loendist. See värskendab kasutajaliidese loendit automaatselt, et kajastada värskendatud massiivi.

Kuidas renderdada loendeid Vue võtmetega

The võti atribuut on kordumatu atribuut, mida Vue kasutab loendis iga üksuse identiteedi jälgimiseks. Kui loendis olev üksus muutub, saate võti atribuut Vue saab DOM-i kiiresti värskendada ilma kogu loendit uuesti renderdamata.

Vaatame näidet Vue võtmetega loendi renderdamisest:

<malli>
<div>
<ul>
<liv-eest="nimi nimedes":võti="nimi.id">
 {{ nimi.nimi }}
<nuppu @klõpsa="removeItem (nimi.id)">Eemaldanuppu>
li>
ul>
div>
malli>
<stsenaarium>
ekspordi vaikimisi {
 andmed() {
 return {
 nimed: [
 { id: 1, nimi: "John"},
 { id: 2, nimi: "Doe"},
 { id: 3, nimi: "James"},
 ],
 };
 },
 meetodid: {
 removeItem (võti) {
 this.names.splice (võti - 1, 1);
 },
 },
};
stsenaarium>

Selles näites on teil loend ainulaadsetest üksustest id omadused. Koodiplokk kasutab võti atribuut koos v-eest käsk loendis iga üksuse identiteedi jälgimiseks. See võimaldab Vuel loendi muutumisel DOM-i tõhusalt värskendada.

Kui eemaldaksite loendist üksuse, värskendaks Vue DOM-i, ilma et peaksite kogu loendit uuesti renderdama. Selle põhjuseks on asjaolu, et Vue hoiab loendis iga üksuse identiteeti ja saab värskendada ainult muutunud üksusi.

The võti atribuut peaks olema loendi iga üksuse kordumatu identifikaator. See võib olla an id atribuut või mõni muu kordumatu identifikaator, mida saab üksuse jälgimiseks kasutada.

Kasutades võti atribuut koos v-eest direktiiv aitab vältida renderdamisprobleeme. Näiteks nimede eemaldamisel kasutab Vue võti atribuut, et säilitada loendis olevate üksuste järjekorda.

Vue direktiivid on olulised

Siin käsitlesite Vue loendite renderdamise põhitõdesid, sealhulgas loenditest üksuste eemaldamist ja loendite renderdamist võtmetega. Nendest mõistetest aru saades saate luua tundliku liidese, mis käsitleb keerulisi andmeloendeid.

Vue-l on palju direktiive erinevatel eesmärkidel, sealhulgas tingimuslik renderdamine, sündmuste sidumine ja andmete sidumine. Nende juhiste mõistmine võib aidata teil luua tõhusaid interaktiivseid veebirakendusi.