Johdatus listan renderöintiin Vuessa

Yksi yleisimmistä web-kehityksen tehtävistä on tietolistojen renderöinti. Vue hoitaa tämän avulla v-for direktiivi. Voit tutkia, mitä v-for-käsky on, kuinka poistaa kohteita luettelosta ja miten luetteloita hahmonnetaan avaimilla.

Mikä on v-for-direktiivi Vuessa?

The v-for direktiivi on yksi Vuen direktiiveistä, jonka avulla voit hahmontaa luetteloita minimaalisella JavaScript-koodilla. The v-for direktiivi toimii samalla tavalla kuin for silmukka JavaScriptissä ja voi iteroida taulukoiden ja objektien yli hahmontaakseen kohteita luettelossa.

Hyödyntämään v-for direktiivissä, anna taulukko, jonka haluat iteroida tiedot omaisuutta Asetukset-objekti Vuessa.

Esimerkiksi:

<sapluuna>
<ul>
<liv-for="nimi nimissä">{{ nimi }}li>
ul>
sapluuna>
<käsikirjoitus>
vienti oletus {
 data() {
 return {
 nimet: ['John', 'Doe', 'James'],
 };
 },
};
käsikirjoitus>

Yllä oleva koodilohko kuvaa esimerkkiä Vue-sovelluksesta, joka käyttää v-for ohje toistaa nimet matriisi, joka tarjotaan tiedot omaisuutta.

v-for on arvo asetettu lausekkeelle, jossa on kaksi osaa: iteraatiomuuttuja (nimi) ja nimet joukko v-for pisteet. Iteraatiomuuttuja pätee jokaisen nimi in nimet taulukko ja näyttää nimi.

Vue luo uuden Document Object Model (DOM) elementti jokaiselle nimi in nimet taulukkoon ja tekee sen verkkosivulla.

Jos nimet taulukon muutokset (esimerkiksi uusi nimi lisätään tai vanha poistetaan), Vue päivittää automaattisesti virtuaalisen DOM: n ja hahmontaa luettelon uudelleen päivitettyjen tietojen mukaan.

Vue tarjoaa myös tavan saada luettelon elementin indeksi.

<liv-for="(nimi, hakemisto) nimissä">{{ nimi }} -- {{ hakemisto }}li>

Yllä oleva koodi kuvaa syntaksia kunkin indeksin näyttämiseksi nimi in nimet joukko.

Voit myös hyödyntää v-for käsky kiertää lukualueen läpi:

<liv-for="numero 10">Vue on kivali>

Yllä oleva koodi luo luettelon, jossa on teksti Vue on kiva kymmenen kertaa. The v-for -direktiivi voi myös käydä läpi useita lukuja näyttääkseen tietoja toistuvasti tai suorittaakseen toiminnon. Tässä tapauksessa nro iteraatiomuuttujaa käytetään luettelon nykyisen kohteen avaamiseen.

Kohteiden poistaminen Vuen luettelosta

Voit antaa käyttäjien poistaa kohteita verkkosovelluksesi luetteloista. Tämä ominaisuus on hyödyllinen luotaessa sovelluksia kuten tehtävälistaa.

Voit käyttää liitos JavaScript-menetelmä (se on yksi tavoista kohteiden poistaminen taulukoista) poistaaksesi kohteen Vuen luettelosta.

array.splice (startIndex, numToRemove, newElements)

Liitosmenetelmä voi lisätä tai poistaa kohteita taulukosta. Jatkomenetelmä ottaa parametrit seuraavassa järjestyksessä:

1. The aloitushakemisto parametri määrittää indeksin, josta taulukon muokkaaminen aloitetaan.
2. numToRemove osoittaa niiden kohteiden määrän, jotka haluat poistaa taulukosta.
3. Lopuksi, uudetElementit parametri, jolla voit lisätä elementtejä taulukkoon. Jos elementtejä ei ole määritetty, liitos() poistaa vain elementtejä taulukosta.

Jotta voit käyttää liitosmenetelmää kohteen poistamiseen Vuen luettelosta, sinun on tiedettävä kyseisen kohteen hakemisto. Yksi tapa saavuttaa tämä on läpäistä indeksi argumenttina menetelmälle, joka käsittelee kohteen poistamisen.

Voit esimerkiksi lisätä taulukon jokaisen nimen viereen painikkeen, joka käynnistää menetelmän kohteen poistamiseksi, kun käyttäjä napsauttaa sitä:

<sapluuna>
<ul>
<liv-for="(nimi, hakemisto) nimissä">
 {{ nimi }} -- {{ hakemisto }}
<-painiketta @klikkaus="removeItem (indeksi)">Poista-painiketta>
li>
ul>
sapluuna>

The indeksi parametri antaa meille pääsyn kunkin indeksiin nimi taulukossa, jonka tämä ohjelma välittää argumenttina Poista esine menetelmä. The Poista esine menetelmää voi sitten käyttää liitos tapa poistaa a nimi alkaen nimet joukko:

<käsikirjoitus>
vienti oletus {
 data() {
 return {
 nimet: ['John', 'Doe', 'James'],
 };
 },
 menetelmät: {
 RemoveItem (indeksi) {
 this.names.splice (indeksi, 1);
 }
}
};
käsikirjoitus>

Yllä oleva skripti käyttää liitos tapa poistaa yksi nimi hahmonnettujen nimien luettelosta. Tämä päivittää käyttöliittymän luettelon automaattisesti vastaamaan päivitettyä taulukkoa.

Kuinka renderöidä luetteloita avaimilla Vuessa

The avain attribuutti on yksilöllinen attribuutti, jota Vue käyttää luettelon jokaisen kohteen identiteetin seuraamiseen. Kun luettelon kohde muuttuu, avain Attribuutti Vue voi päivittää DOM: n nopeasti ilman koko luettelon uudelleenhahmontamista.

Katsotaanpa esimerkkiä luettelon hahmontamisesta avaimilla Vuessa:

<sapluuna>
<div>
<ul>
<liv-for="nimi nimissä":avain="nimi.id">
 {{ nimi.nimi }}
<-painiketta @klikkaus="removeItem (nimi.id)">Poista-painiketta>
li>
ul>
div>
sapluuna>
<käsikirjoitus>
vienti oletus {
 data() {
 return {
 nimet: [
 { id: 1, name: "John"},
 { id: 2, name: "Doe"},
 { id: 3, name: "James"},
 ],
 };
 },
 menetelmät: {
 RemoveItem (avain) {
 this.names.splice (avain - 1, 1);
 },
 },
};
käsikirjoitus>

Tässä esimerkissä sinulla on luettelo kohteista, joilla on yksilöllinen id ominaisuuksia. Koodilohko käyttää avain attribuutti kanssa v-for ohje, joka seuraa luettelon kunkin kohteen identiteettiä. Näin Vue voi päivittää DOM: n tehokkaasti listan muuttuessa.

Jos poistaisit kohteen luettelosta, Vue päivittäisi DOM: n ilman, että koko luetteloa tarvitsee hahmontaa uudelleen. Tämä johtuu siitä, että Vue säilyttää luettelon jokaisen kohteen identiteetin ja voi päivittää vain muuttuneet kohteet.

The avain attribuutin tulee olla yksilöivä tunniste jokaiselle luettelon kohteelle. Tämä voi olla an id ominaisuus tai mikä tahansa muu yksilöllinen tunniste, jota voidaan käyttää kohteen jäljittämiseen.

Käyttämällä avain attribuutti kanssa v-for direktiivi auttaa välttämään renderöintiongelmia. Esimerkiksi nimiä poistaessaan Vue käyttää avain attribuutti säilyttää luettelon kohteiden järjestyksen.

Vue-direktiivit ovat välttämättömiä

Tässä kerroit Vuen luetteloiden renderöinnin perusteet, mukaan lukien kohteiden poistaminen luetteloista ja luetteloiden renderöiminen avaimilla. Voit rakentaa reagoivia käyttöliittymiä, jotka käsittelevät monimutkaisia ​​tietoluetteloita ymmärtämällä nämä käsitteet.

Vuella on lukuisia direktiivejä eri tarkoituksiin, mukaan lukien ehdollinen renderöinti, tapahtumasidonta ja tietojen sitominen. Näiden ohjeiden ymmärtäminen voi auttaa sinua luomaan tehokkaita interaktiivisia verkkosovelluksia.