O introducere în redarea listelor în Vue

Una dintre cele mai comune sarcini în dezvoltarea web este redarea listelor de date. Vue se ocupă de asta cu ajutorul v-pentru directivă. Veți explora ce este directiva v-for, cum să eliminați elemente dintr-o listă și cum să randați liste cu chei.

Ce este directiva v-for în Vue?

The v-pentru directiva este una dintre directivele Vue care vă permite să randați liste cu cod JavaScript minim. The v-pentru directiva funcționează similar cu pentru buclă în JavaScript și poate itera peste matrice și obiecte pentru a reda elemente dintr-o listă.

Pentru a utiliza v-pentru directivă, furnizați o matrice pe care doriți să o iterați în date proprietatea Obiect Opțiuni în Vue.

De exemplu:

<șablon>
<ul>
<liv-pentru=„numele în nume”>{{ Nume }}li>
ul>
șablon>
<scenariu>
export implicit {
 date() {
 întoarcere {
 nume: [„John”, „Doe”, „James”],
 };
 },
};
scenariu>

Blocul de cod de mai sus prezintă un exemplu de aplicație Vue care utilizează v-pentru directivă de a repeta peste nume matrice care este furnizată în date proprietate.

v-pentru are o valoare setată la o expresie cu două părți: variabila de iterație (Nume) si nume matrice v-pentru arata spre. Variabila de iterație deține fiecare Nume în nume matrice și afișează Nume.

Vue creează un nou Document Object Model (DOM) element pentru fiecare Nume în nume matrice și îl redă pe pagina web.

Dacă nume modificări ale matricei (de exemplu, un nume nou este adăugat sau unul vechi este eliminat), Vue va actualiza automat DOM-ul virtual și va reda lista pentru a reflecta datele actualizate.

Vue oferă, de asemenea, o modalitate de a obține indexul unui element dintr-o listă.

<liv-pentru=„(nume, index) în nume”>{{ nume }} -- {{ index }}li>

Codul de mai sus descrie sintaxa pentru afișarea indexului fiecăruia Nume în nume matrice.

De asemenea, puteți utiliza v-pentru directivă de a parcurge o serie de numere:

<liv-pentru="numar in 10">Vue este frumosli>

Codul de mai sus va reda o listă cu textul Vue este frumos de zece ori. The v-pentru directiva poate, de asemenea, să parcurgă o serie de numere pentru a afișa în mod repetat date sau pentru a efectua o operație. În acest caz, num variabila de iterație este utilizată pentru a accesa elementul curent din listă.

Cum să eliminați articole dintr-o listă în Vue

Puteți permite utilizatorilor să elimine articole din liste din aplicația dvs. web. Această caracteristică este utilă atunci când construiești aplicații precum o listă de activități.

Puteți folosi lipitură Metoda JavaScript (aceasta este una dintre modalitățile de eliminarea elementelor din matrice) pentru a elimina un element dintr-o listă în Vue.

array.splice (startIndex, numToRemove, newElements)

Metoda de îmbinare poate adăuga sau elimina elemente dintr-o matrice. Metoda de îmbinare preia parametrii în următoarea ordine:

1. The startIndex parametrul setează indexul la care se începe modificarea matricei.
2. numToRemove indică numărul de elemente pe care doriți să le eliminați din matrice.
3. În cele din urmă, cel elemente noi parametru, pe care îl puteți folosi pentru a adăuga elemente la matrice. Dacă nu sunt specificate elemente, lipitură() va elimina doar elemente din matrice.

Pentru a utiliza metoda de îmbinare pentru a elimina un articol dintr-o listă în Vue, trebuie să cunoașteți indexul articolului respectiv. O modalitate de a realiza acest lucru este de a trece index ca argument pentru o metodă care se ocupă de eliminarea articolului.

De exemplu, puteți adăuga un buton lângă fiecare nume din matrice care declanșează o metodă de a elimina elementul atunci când un utilizator dă clic pe el:

<șablon>
<ul>
<liv-pentru=„(nume, index) în nume”>
 {{ nume }} -- {{ index }}
<buton @clic=„eliminare element (index)”>Eliminabuton>
li>
ul>
șablon>

The index parametrul ne oferă acces la indexul fiecăruia Nume în matrice, pe care acest program îl transmite ca argument la removeItem metodă. The removeItem metoda poate folosi apoi lipitură metoda de a elimina a Nume de la nume matrice:

<scenariu>
export implicit {
 date() {
 întoarcere {
 nume: [„John”, „Doe”, „James”],
 };
 },
 metode: {
 removeItem (index) {
 acest.nume.splice (index, 1);
 }
}
};
scenariu>

Scriptul de mai sus folosește lipitură metoda de a elimina un nume din lista de nume redate. Aceasta va actualiza automat lista din interfața de utilizare pentru a reflecta matricea actualizată.

Cum să redați liste cu chei în Vue

The cheie atribut este un atribut unic pe care Vue îl folosește pentru a urmări identitatea fiecărui element din listă. Când un element din listă se modifică, cu ajutorul cheie Atributul Vue poate actualiza rapid DOM-ul fără a reda întreaga listă.

Să aruncăm o privire la un exemplu de redare a unei liste cu chei în Vue:

<șablon>
<div>
<ul>
<liv-pentru=„numele în nume”:cheie=„nume.id”>
 {{ nume.nume }}
<buton @clic=„removeItem (name.id)”>Eliminabuton>
li>
ul>
div>
șablon>
<scenariu>
export implicit {
 date() {
 întoarcere {
 nume: [
 { id: 1, nume: „Ioan”},
 { id: 2, nume: „Doe”},
 { id: 3, nume: „James”},
 ],
 };
 },
 metode: {
 removeItem (cheie) {
 acest.nume.splice (cheie - 1, 1);
 },
 },
};
scenariu>

În acest exemplu, aveți o listă de articole cu unic id proprietăți. Blocul de cod folosește cheie atributul cu v-pentru directivă pentru a urmări identitatea fiecărui element din listă. Acest lucru permite Vue să actualizeze eficient DOM-ul atunci când lista se schimbă.

Dacă ar fi să eliminați un articol din listă, Vue ar actualiza DOM-ul fără a fi nevoie să redați din nou întreaga listă. Acest lucru se datorează faptului că Vue deține identitatea fiecărui element din listă și poate actualiza doar elementele care s-au modificat.

The cheie atributul ar trebui să fie un identificator unic pentru fiecare articol din listă. Aceasta poate fi o id proprietate sau orice alt identificator unic care poate fi folosit pentru a urmări articolul.

Folosind cheie atributul cu v-pentru directiva ajută la evitarea problemelor de randare. De exemplu, la eliminarea numelor, Vue folosește cheie atribut pentru a menține ordinea articolelor din listă.

Directivele Vue sunt esențiale

Aici, ați acoperit elementele de bază ale randării listelor în Vue, inclusiv eliminarea elementelor din liste și randarea listelor cu chei. Puteți construi interfețe receptive care gestionează liste complexe de date prin înțelegerea acestor concepte.

Vue are o multitudine de directive pentru diferite scopuri, inclusiv redarea condiționată, legarea de evenimente și legarea de date. Înțelegerea acestor directive vă poate ajuta să creați aplicații web interactive eficiente.