Uvod v upodabljanje seznamov v Vue

Ena najpogostejših nalog pri spletnem razvoju je upodabljanje podatkovnih seznamov. Vue to reši s pomočjo v-za direktiva. Raziskali boste, kaj je direktiva v-for, kako odstraniti elemente s seznama in kako upodobiti sezname s ključi.

Kaj je direktiva v-for v Vue?

The v-za je ena od direktiv Vue, ki vam omogoča upodabljanje seznamov z minimalno kodo JavaScript. The v-za direktiva deluje podobno kot for zanke v JavaScriptu in lahko iterira po nizih in objektih za upodabljanje elementov na seznamu.

Za uporabo v-za zagotovite matriko, ki jo želite ponoviti v podatke lastnina Predmet možnosti v Vue.

Na primer:

<predlogo>
<ul>
<liv-za="ime v imenih">{{ ime }}li>
ul>
predlogo>
<scenarij>
izvoz privzeto {
 podatki() {
 return {
 imena: ['John', 'Doe', 'James'],
 };
 },
};
scenarij>

Zgornji blok kode prikazuje primer aplikacije Vue, ki uporablja v-za direktivo za ponavljanje imena matriko, ki je na voljo v podatke premoženje.

v-za ima vrednost, nastavljeno na izraz z dvema deloma: iteracijsko spremenljivko (

ime) in imena niz v-za kaže na. Iteracijska spremenljivka drži vsako ime v imena matriko in prikaže ime.

Vue ustvari novo Objektni model dokumenta (DOM) element za vsakega ime v imena matriko in jo upodobi na spletni strani.

Če je imena spremembe matrike (na primer dodano je novo ime ali odstranjeno staro), bo Vue samodejno posodobil virtualni DOM in znova upodobil seznam, da bo odražal posodobljene podatke.

Vue ponuja tudi način za pridobitev indeksa elementa na seznamu.

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

Zgornja koda prikazuje sintakso za prikaz indeksa vsakega ime v imena niz.

Uporabite lahko tudi v-za direktiva za zanko skozi obseg števil:

<liv-za="število v 10">Vue je lepoli>

Zgornja koda bo prikazala seznam z besedilom Vue je lepo desetkrat. The v-za direktiva lahko tudi kroži skozi obseg števil za večkratni prikaz podatkov ali izvedbo operacije. V tem primeru je št iteracijska spremenljivka se uporablja za dostop do trenutnega elementa na seznamu.

Kako odstraniti elemente s seznama v Vue

Uporabnikom lahko dovolite, da odstranijo elemente s seznamov v vaši spletni aplikaciji. Ta funkcija je uporabna pri ustvarjanju aplikacij, kot je seznam opravil.

Lahko uporabite spoj Metoda JavaScript (to je eden od načinov za odstranjevanje elementov iz nizov), da odstranite element s seznama v Vue.

array.splice (startIndex, numToRemove, newElements)

Metoda spajanja lahko doda ali odstrani elemente iz polja. Metoda spajanja zajema parametre v naslednjem vrstnem redu:

1. The startIndex parameter nastavi indeks, pri katerem se začne spreminjanje matrike.
2. numToRemove označuje število elementov, ki jih želite odstraniti iz matrike.
3. Končno, noviElementi parameter, ki ga lahko uporabite za dodajanje elementov v matriko. Če ni določen noben element, spoj () odstrani samo elemente iz matrike.

Če želite uporabiti metodo spajanja za odstranitev elementa s seznama v Vue, morate poznati indeks tega elementa. Eden od načinov, kako to doseči, je, da prenesete kazalo kot argument za metodo, ki obravnava odstranitev predmeta.

Na primer, poleg vsakega imena v matriki lahko dodate gumb, ki sproži metodo za odstranitev elementa, ko uporabnik klikne nanj:

<predlogo>
<ul>
<liv-za="(ime, indeks) v imenih">
 {{ name }} -- {{ index }}
<gumb @kliknite="odstranipredmet (indeks)">Odstranigumb>
li>
ul>
predlogo>

The kazalo parameter nam omogoča dostop do indeksa vsakega ime v matriki, ki jo ta program posreduje kot argument v odstranipredmet metoda. The odstranipredmet metoda lahko nato uporabi spoj način za odstranitev a ime Iz imena niz:

<scenarij>
izvoz privzeto {
 podatki() {
 return {
 imena: ['John', 'Doe', 'James'],
 };
 },
 metode: {
 removeItem (indeks) {
 this.names.splice (indeks, 1);
 }
}
};
scenarij>

Zgornji skript uporablja spoj za odstranitev enega imena s seznama upodobljenih imen. To bo samodejno posodobilo seznam v uporabniškem vmesniku, da bo odražal posodobljeno matriko.

Kako upodobiti sezname s ključi v Vue

The ključ atribut je edinstven atribut, ki ga Vue uporablja za sledenje identiteti vsakega elementa na seznamu. Ko se element na seznamu spremeni, s pomočjo ključ atribut Vue lahko hitro posodobi DOM brez ponovnega upodabljanja celotnega seznama.

Oglejmo si primer upodabljanja seznama s ključi v Vue:

<predlogo>
<div>
<ul>
<liv-za="ime v imenih":ključ="ime.id">
 {{ ime.ime }}
<gumb @kliknite="odstranipredmet (ime.id)">Odstranigumb>
li>
ul>
div>
predlogo>
<scenarij>
izvoz privzeto {
 podatki() {
 return {
 imena: [
 { id: 1, ime: "John"},
 { id: 2, ime: "Doe"},
 { id: 3, ime: "James"},
 ],
 };
 },
 metode: {
 removeItem (ključ) {
 this.names.splice (ključ - 1, 1);
 },
 },
};
scenarij>

V tem primeru imate seznam elementov z edinstvenimi id lastnosti. Blok kode uporablja ključ atribut z v-za direktivo za sledenje identiteti vsakega elementa na seznamu. To omogoča Vue, da učinkovito posodobi DOM, ko se seznam spremeni.

Če bi odstranili element s seznama, bi Vue posodobil DOM, ne da bi moral znova upodabljati celoten seznam. To je zato, ker Vue hrani identiteto vsakega elementa na seznamu in lahko posodobi samo elemente, ki so bili spremenjeni.

The ključ mora biti enolični identifikator za vsako postavko na seznamu. To je lahko id lastnosti ali katerega koli drugega edinstvenega identifikatorja, ki se lahko uporablja za sledenje elementu.

Uporabljati ključ atribut z v-za direktiva pomaga preprečiti težave z upodabljanjem. Na primer, pri odstranjevanju imen Vue uporabi ključ atribut za vzdrževanje vrstnega reda elementov na seznamu.

Direktive Vue so bistvenega pomena

Tukaj ste obravnavali osnove upodabljanja seznamov v Vue, vključno z odstranjevanjem elementov s seznamov in upodabljanjem seznamov s ključi. Z razumevanjem teh konceptov lahko zgradite odzivne vmesnike, ki obravnavajo zapletene sezname podatkov.

Vue ima množico direktiv za različne namene, vključno s pogojnim upodabljanjem, vezavo dogodkov in vezavo podatkov. Razumevanje teh navodil vam lahko pomaga narediti učinkovite interaktivne spletne aplikacije.