Uvod u prikaz popisa u Vueu

Jedan od najčešćih zadataka u web razvoju je renderiranje popisa podataka. Vue to rješava uz pomoć v-za direktiva. Istražit ćete što je v-for direktiva, kako ukloniti stavke s popisa i kako prikazati popise s ključevima.

Što je v-za direktiva u Vueu?

The v-za direktiva je jedna od Vue direktiva koja vam omogućuje renderiranje popisa s minimalnim JavaScript kodom. The v-za direktiva radi slično kao for petlja u JavaScriptu i može iterirati nizove i objekte za prikaz stavki na popisu.

Za korištenje v-za direktivi, navedite polje koje želite iterirati u podaci vlasništvo od Objekt opcija u Vueu.

Na primjer:

<predložak>
<ul>
<liv-za="ime u imenima">{{ Ime }}li>
ul>
predložak>
<skripta>
izvoz zadanih {
 podaci() {
 povratak {
 imena: ['John', 'Doe', 'James'],
 };
 },
};
skripta>

Gornji blok koda prikazuje primjer aplikacije Vue koja koristi v-za direktiva za ponavljanje imena polje koje je navedeno u podaci vlasništvo.

v-za ima vrijednost postavljenu na izraz s dva dijela: varijablu iteracije (

Ime) i imena niz v-za pokazuje na. Varijabla iteracije drži svaki Ime u imena niz i prikazuje Ime.

Vue stvara novi Objektni model dokumenta (DOM) element za svaki Ime u imena polje i prikazuje ga na web stranici.

Ako je imena promjene polja (na primjer, dodano je novo ime ili uklonjeno staro), Vue će automatski ažurirati virtualni DOM i ponovno prikazati popis kako bi odražavao ažurirane podatke.

Vue također nudi način dobivanja indeksa elementa na popisu.

<liv-za="(ime, indeks) u imenima">{{ name }} -- {{ index }}li>

Gornji kod opisuje sintaksu za prikaz indeksa svakog Ime u imena niz.

Također možete koristiti v-za direktiva za kretanje kroz niz brojeva:

<liv-za="broj u 10">Vue je lijepli>

Gornji kod će prikazati popis s tekstom Vue je lijep deset puta. The v-za Direktiva također može kružiti kroz niz brojeva za opetovano prikazivanje podataka ili izvođenje operacije. U ovom slučaju, br varijabla iteracije koristi se za pristup trenutnoj stavci na popisu.

Kako ukloniti stavke s popisa u Vueu

Korisnicima možete dopustiti uklanjanje stavki s popisa u vašoj web-aplikaciji. Ova je značajka korisna pri izradi aplikacija poput popisa obaveza.

Možete koristiti spajanje JavaScript metoda (to je jedan od načina uklanjanje stavki iz nizova) za uklanjanje stavke s popisa u Vueu.

array.splice (startIndex, numToRemove, newElements)

Metoda spajanja može dodati ili ukloniti stavke iz polja. Metoda spajanja uzima parametre sljedećim redoslijedom:

1. The startIndex parametar postavlja indeks od kojeg se počinje mijenjati niz.
2. numToRemove označava broj stavki koje želite ukloniti iz niza.
3. Konačno, noviElementi parametar, koji možete koristiti za dodavanje elemenata u polje. Ako nisu navedeni elementi, spoj() će ukloniti samo elemente iz niza.

Da biste koristili metodu spajanja za uklanjanje stavke s popisa u Vueu, trebate znati indeks te stavke. Jedan od načina da se to postigne je proći indeks kao argument metodi koja upravlja uklanjanjem stavke.

Na primjer, možete dodati gumb pored svakog naziva u nizu koji pokreće metodu za uklanjanje stavke kada korisnik klikne na nju:

<predložak>
<ul>
<liv-za="(ime, indeks) u imenima">
 {{ name }} -- {{ index }}
<dugme @klik="ukloniStavku (indeks)">Uklonitidugme>
li>
ul>
predložak>

The indeks daje nam pristup indeksu svakog Ime u nizu, koji ovaj program prosljeđuje kao argument u removeItem metoda. The removeItem metoda tada može koristiti spajanje metoda uklanjanja a Ime od imena niz:

<skripta>
izvoz zadanih {
 podaci() {
 povratak {
 imena: ['John', 'Doe', 'James'],
 };
 },
 metode: {
 removeItem (indeks) {
 this.names.splice (indeks, 1);
 }
}
};
skripta>

Gornja skripta koristi spajanje metoda za uklanjanje jednog imena s prikazanog popisa imena. Ovo će automatski ažurirati popis u korisničkom sučelju kako bi odražavao ažurirani niz.

Kako renderirati popise s ključevima u Vueu

The ključ atribut je jedinstveni atribut koji Vue koristi za praćenje identiteta svake stavke na popisu. Kada se stavka na popisu promijeni, uz pomoć ključ atribut Vue može brzo ažurirati DOM bez ponovnog renderiranja cijelog popisa.

Pogledajmo primjer renderiranja popisa s ključevima u Vueu:

<predložak>
<div>
<ul>
<liv-za="ime u imenima":ključ="ime.id">
 {{ name.name }}
<dugme @klik="ukloniStavku (ime.id)">Uklonitidugme>
li>
ul>
div>
predložak>
<skripta>
izvoz zadanih {
 podaci() {
 povratak {
 imena: [
 { id: 1, ime: "John"},
 { id: 2, naziv: "Doe"},
 { id: 3, ime: "James"},
 ],
 };
 },
 metode: {
 removeItem (ključ) {
 this.names.splice (ključ - 1, 1);
 },
 },
};
skripta>

U ovom primjeru imate popis stavki s jedinstvenim iskaznica Svojstva. Blok koda koristi ključ atribut s v-za direktivu za praćenje identiteta svake stavke na popisu. To omogućuje Vueu da učinkovito ažurira DOM kada se popis promijeni.

Ako želite ukloniti stavku s popisa, Vue će ažurirati DOM bez ponovnog renderiranja cijelog popisa. To je zato što Vue čuva identitet svake stavke na popisu i može ažurirati samo one stavke koje su promijenjene.

The ključ atribut bi trebao biti jedinstveni identifikator za svaku stavku na popisu. Ovo može biti iskaznica svojstvo ili bilo koji drugi jedinstveni identifikator koji se može koristiti za praćenje stavke.

Koristiti ključ atribut s v-za direktiva pomaže u izbjegavanju problema s generiranjem. Na primjer, kada uklanja imena, Vue koristi ključ atribut za održavanje redoslijeda stavki na popisu.

Vue direktive su ključne

Ovdje ste pokrili osnove renderiranja popisa u Vueu, uključujući uklanjanje stavki s popisa i renderiranje popisa s ključevima. Razumijevanjem ovih koncepata možete izgraditi responzivna sučelja koja obrađuju složene popise podataka.

Vue ima mnoštvo direktiva za različite svrhe, uključujući uvjetno prikazivanje, povezivanje događaja i povezivanje podataka. Razumijevanje ovih uputa može vam pomoći da napravite učinkovite interaktivne web aplikacije.