En introduksjon til listegjengivelse i Vue

En av de vanligste oppgavene innen webutvikling er å gjengi datalister. Vue håndterer dette ved hjelp av v-for direktiv. Du vil utforske hva v-for-direktivet er, hvordan du fjerner elementer fra en liste, og hvordan du gjengir lister med nøkler.

Hva er v-for-direktivet i Vue?

De v-for directive er et av Vues direktiver som lar deg gjengi lister med minimal JavaScript-kode. De v-for direktiv fungerer på samme måte som for løkke i JavaScript og kan iterere over matriser og objekter for å gjengi elementer i en liste.

For å bruke v-for direktiv, oppgi en matrise du vil iterere over i data eiendommen til Options-objekt i Vue.

For eksempel:

<mal>
<ul>
<liv-for="navn i navn">{{ Navn }}li>
ul>
mal>
<manus>
eksport standard {
 data() {
 komme tilbake {
 names: ['John', 'Doe', 'James'],
 };
 },
};
manus>

Kodeblokken ovenfor viser et eksempel på en Vue-app som bruker v-for direktiv om å iterere over navn array som er gitt i data eiendom.

v-for har en verdi satt til et uttrykk med to deler: iterasjonsvariabelen (

Navn) og navn array v-for poeng til. Iterasjonsvariabelen holder hver Navn i navn array og viser Navn.

Vue skaper en ny Document Object Model (DOM) element for hver Navn i navn array og gjengir den på nettsiden.

Hvis navn array-endringer (for eksempel et nytt navn legges til eller et gammelt fjernes), vil Vue automatisk oppdatere den virtuelle DOM-en og gjengi listen for å gjenspeile de oppdaterte dataene.

Vue tilbyr også en måte å få indeksen til et element i en liste.

<liv-for="(navn, indeks) i navn">{{ navn }} -- {{ indeks }}li>

Koden ovenfor viser syntaksen for å vise indeksen til hver Navn i navn array.

Du kan også bruke v-for direktiv om å gå gjennom en rekke tall:

<liv-for="antall i 10">Vue er fintli>

Koden ovenfor vil gjengi en liste med teksten Vue er fint ti ganger. De v-for direktiv kan også gå gjennom en rekke tall for å vise data gjentatte ganger eller utføre en operasjon. I dette tilfellet num iterasjonsvariabel brukes for å få tilgang til gjeldende element i listen.

Slik fjerner du elementer fra en liste i Vue

Du kan tillate brukere å fjerne elementer fra lister i nettappen din. Denne funksjonen er nyttig når du bygger apper som en oppgaveliste.

Du kan bruke skjøte JavaScript-metoden (det er en av måtene å fjerning av elementer fra arrays) for å fjerne et element fra en liste i Vue.

array.splice (startIndex, numToRemove, newElements)

Spleisemetoden kan legge til eller fjerne elementer fra en matrise. Skjøtemetoden tar inn parametrene i følgende rekkefølge:

1. De startindeks parameteren setter indeksen for å begynne å endre matrisen.
2. numToRemove angir antall elementer du vil fjerne fra matrisen.
3. Til slutt, den nye elementer parameter, som du kan bruke til å legge til elementer i matrisen. Hvis ingen elementer er spesifisert, skjøte() vil bare fjerne elementer fra matrisen.

For å bruke spleisemetoden til å fjerne et element fra en liste i Vue, må du kjenne indeksen til det elementet. En måte å oppnå dette på er å bestå indeks som et argument til en metode som håndterer fjerning av varen.

Du kan for eksempel legge til en knapp ved siden av hvert navn i matrisen som utløser en metode for å fjerne elementet når en bruker klikker på det:

<mal>
<ul>
<liv-for="(navn, indeks) i navn">
 {{ navn }} -- {{ indeks }}
<knapp @klikk="fjernelement (indeks)">Fjerneknapp>
li>
ul>
mal>

De indeks parameter gir oss tilgang til indeksen for hver Navn i matrisen, som dette programmet sender som et argument til fjerne gjenstand metode. De fjerne gjenstand metoden kan da bruke skjøte metode for å fjerne en Navn fra navn array:

<manus>
eksport standard {
 data() {
 komme tilbake {
 names: ['John', 'Doe', 'James'],
 };
 },
 metoder: {
 removeItem (indeks) {
 this.names.splice (indeks, 1);
 }
}
};
manus>

Skriptet ovenfor bruker skjøte metode for å fjerne ett navn fra listen over gjengitte navn. Dette vil automatisk oppdatere listen i brukergrensesnittet for å gjenspeile den oppdaterte matrisen.

Hvordan gjengi lister med nøkler i Vue

De nøkkel attributt er et unikt attributt som Vue bruker for å spore identiteten til hvert element i listen. Når et element i listen endres, ved hjelp av nøkkel attributt Vue kan raskt oppdatere DOM uten å gjengi hele listen på nytt.

La oss ta en titt på et eksempel på å gjengi en liste med nøkler i Vue:

<mal>
<div>
<ul>
<liv-for="navn i navn":nøkkel="navn.id">
 {{ navn.navn }}
<knapp @klikk="removeItem (name.id)">Fjerneknapp>
li>
ul>
div>
mal>
<manus>
eksport standard {
 data() {
 komme tilbake {
 navn: [
 { id: 1, navn: "John"},
 { id: 2, navn: "Doe"},
 { id: 3, navn: "James"},
 ],
 };
 },
 metoder: {
 removeItem (nøkkel) {
 this.names.splice (nøkkel - 1, 1);
 },
 },
};
manus>

I dette eksemplet har du en liste over elementer med unike id egenskaper. Kodeblokken bruker nøkkel attributt med v-for direktiv for å spore identiteten til hvert element i listen. Dette lar Vue effektivt oppdatere DOM når listen endres.

Hvis du skulle fjerne et element fra listen, ville Vue oppdatere DOM-en uten å måtte gjengi hele listen på nytt. Dette er fordi Vue har identiteten til hvert element i listen og kan bare oppdatere elementene som har endret seg.

De nøkkel attributtet skal være en unik identifikator for hvert element i listen. Dette kan være en id eiendom eller annen unik identifikator som kan brukes til å spore varen.

Bruker nøkkel attributt med v-for direktiv bidrar til å unngå gjengivelsesproblemer. For eksempel, når du fjerner navnene, bruker Vue nøkkel attributt for å opprettholde rekkefølgen på elementene i listen.

Vue-direktiver er essensielle

Her dekket du det grunnleggende om å gjengi lister i Vue, inkludert å fjerne elementer fra lister og gjengi lister med nøkler. Du kan bygge responsive grensesnitt som håndterer komplekse datalister ved å forstå disse konseptene.

Vue har en mengde direktiver for forskjellige formål, inkludert betinget gjengivelse, hendelsesbinding og databinding. Å forstå disse direktivene kan hjelpe deg med å lage effektive interaktive nettapper.