Bevezetés a Vue listamegjelenítésébe

A webfejlesztés egyik leggyakoribb feladata az adatlisták megjelenítése. A Vue ezt a segítségével kezeli v-for irányelv. Megtudhatja, mi az a v-for direktíva, hogyan távolíthat el elemeket a listából, és hogyan lehet a listákat megjeleníteni kulcsokkal.

Mi az a v-for irányelv a Vue-ben?

A v-for direktíva a Vue egyik direktívája, amely lehetővé teszi listák megjelenítését minimális JavaScript kóddal. A v-for direktíva hasonlóan működik, mint a for hurok JavaScriptben és tömbök és objektumok között iterálva megjelenítheti az elemeket egy listában.

Felhasználni a v-for direktíva, adjon meg egy tömböt, amelyen át szeretne ismételni a adat tulajdona a Options objektum a Vue-ban.

Például:

<sablon>
<ul>
<liv-for="név a nevekben">{{ név }}li>
ul>
sablon>
<forgatókönyv>
export default {
 adat() {
 Visszatérés {
 nevek: ['John', 'Doe', 'James'],
 };
 },
};
forgatókönyv>

A fenti kódblokk egy példát mutat be egy Vue alkalmazásra, amely a v-for direktíva, hogy ismételje meg a neveket a tömbben található adat ingatlan.

v-for értéke két részből álló kifejezésre van beállítva: az iterációs változó (név) és a neveket sor v-for mutat valahová. Az iterációs változó mindegyiket tartalmazza név ban,-ben neveket tömböt és megjeleníti a név.

A Vue újat hoz létre Dokumentumobjektum modell (DOM) elem mindegyikhez név ban,-ben neveket tömböt, és megjeleníti a weboldalon.

Ha a neveket tömbmódosítások (például új név hozzáadása vagy egy régi eltávolítása), a Vue automatikusan frissíti a virtuális DOM-ot, és újra rendereli a listát, hogy tükrözze a frissített adatokat.

A Vue lehetőséget kínál egy lista elemének indexének lekérésére is.

<liv-for="(név, index) a nevekben">{{ név }} -- {{ index }}li>

A fenti kód az egyes indexek megjelenítésének szintaxisát írja le név ban,-ben neveket sor.

Használhatja továbbá a v-for direktíva egy számtartományon keresztüli ciklushoz:

<liv-for="szám a 10-ben">Vue szépli>

A fenti kód egy listát jelenít meg a szöveggel Vue szép tízszer. A v-for A direktíva számtartományon is áthaladhat az adatok ismételt megjelenítéséhez vagy egy művelet végrehajtásához. Ebben az esetben a sz iterációs változó a lista aktuális elemének eléréséhez használható.

Elemek eltávolítása a Vue listájáról

Engedélyezheti a felhasználóknak, hogy eltávolítsanak elemeket a webalkalmazásban található listákról. Ez a funkció akkor hasznos, ha olyan alkalmazásokat készít, mint például egy teendőlista.

Használhatja a toldás JavaScript metódus (ez az egyik módja annak elemek eltávolítása a tömbökből) elem eltávolításához a Vue listájáról.

array.splice (startIndex, numToRemove, newElements)

A splice metódus hozzáadhat vagy eltávolíthat elemeket egy tömbből. Az illesztési módszer a következő sorrendben veszi fel a paramétereket:

1. A startIndex paraméter beállítja azt az indexet, amelynél elkezdődik a tömb módosítása.
2. numToRemove a tömbből eltávolítani kívánt elemek számát jelzi.
3. Végül a newElements paramétert, amellyel elemeket adhatunk a tömbhöz. Ha nincs megadva elem, splice() csak elemeket távolít el a tömbből.

Ha a splice módszerrel szeretne eltávolítani egy elemet a Vue listáról, ismernie kell az elem indexét. Ennek elérésének egyik módja a index az elem eltávolítását kezelő metódus argumentumaként.

Például a tömbben minden név mellé hozzáadhat egy gombot, amely elindít egy módszert az elem eltávolítására, amikor a felhasználó rákattint:

<sablon>
<ul>
<liv-for="(név, index) a nevekben">
 {{ név }} -- {{ index }}
<gomb @kattintson="removeItem (index)">Távolítsa elgomb>
li>
ul>
sablon>

A index paraméter hozzáférést biztosít számunkra mindegyik indexéhez név a tömbben, amelyet ez a program argumentumként ad át a elem eltávolítása módszer. A elem eltávolítása módszer ezután használhatja a toldás eltávolításának módja a név tól neveket sor:

<forgatókönyv>
export default {
 adat() {
 Visszatérés {
 nevek: ['John', 'Doe', 'James'],
 };
 },
 módszerek: {
 removeItem (index) {
 this.names.splice (index, 1);
 }
}
};
forgatókönyv>

A fenti szkript a toldás módszerrel eltávolíthat egy nevet a megjelenített nevek listájáról. Ez automatikusan frissíti a listát a felhasználói felületen, hogy tükrözze a frissített tömböt.

Hogyan lehet listákat renderelni kulcsokkal a Vue-ban

A kulcs Az attribútum egy egyedi attribútum, amelyet a Vue a lista egyes elemeinek azonosítására használ. Amikor egy elem a listában megváltozik, a segítségével a kulcs A Vue attribútum gyorsan frissítheti a DOM-ot a teljes lista újrarenderelése nélkül.

Vessünk egy példát egy lista kulcsokkal való megjelenítésére a Vue-ban:

<sablon>
<div>
<ul>
<liv-for="név a nevekben":kulcs="név.azonosító">
 {{ név.név }}
<gomb @kattintson="removeItem (name.id)">Távolítsa elgomb>
li>
ul>
div>
sablon>
<forgatókönyv>
export default {
 adat() {
 Visszatérés {
 nevek: [
 { azonosító: 1, név: "János"},
 { id: 2, name: "Doe"},
 { azonosító: 3, név: "James"},
 ],
 };
 },
 módszerek: {
 RemoveItem (kulcs) {
 this.names.splice (kulcs - 1, 1);
 },
 },
};
forgatókönyv>

Ebben a példában az egyedi elemek listája látható id tulajdonságait. A kódblokk a kulcs attribútum a v-for utasítást a lista egyes elemeinek azonosítására. Ez lehetővé teszi a Vue számára, hogy hatékonyan frissítse a DOM-ot, amikor a lista megváltozik.

Ha eltávolítana egy elemet a listáról, a Vue anélkül frissítené a DOM-ot, hogy újra meg kellene jelenítenie a teljes listát. Ennek az az oka, hogy a Vue a lista minden elemének azonosságát tartalmazza, és csak a megváltozott elemeket tudja frissíteni.

A kulcs attribútumnak egyedi azonosítónak kell lennie a lista minden eleméhez. Ez lehet egy id tulajdonság vagy bármely más egyedi azonosító, amely a tétel nyomon követésére használható.

Használni a kulcs attribútum a v-for irányelv segít elkerülni a renderelési problémákat. Például a nevek eltávolításakor a Vue a kulcs attribútumot a lista elemeinek sorrendjének fenntartásához.

A Vue-irányelvek elengedhetetlenek

Itt bemutatta a listák Vue-ban való megjelenítésének alapjait, beleértve az elemek listákból való eltávolítását és a listák kulcsokkal történő megjelenítését. Ezeknek a fogalmaknak a megértésével adaptív interfészeket hozhat létre, amelyek összetett adatlistákat kezelnek.

A Vue számos irányelvvel rendelkezik különböző célokra, beleértve a feltételes renderelést, az eseménykötést és az adatkötést. Ezen irányelvek megértése segíthet hatékony interaktív webalkalmazások létrehozásában.