Sąrašo atvaizdavimo Vue įvadas

Viena iš dažniausiai atliekamų interneto kūrimo užduočių yra duomenų sąrašų atvaizdavimas. „Vue“ tai tvarko naudodamas v-už direktyva. Išsiaiškinsite, kas yra v-for direktyva, kaip pašalinti elementus iš sąrašo ir kaip pateikti sąrašus su raktais.

Kas yra V-for direktyva Vue?

The v-už direktyva yra viena iš Vue direktyvų, leidžiančių pateikti sąrašus su minimaliu JavaScript kodu. The v-už direktyva veikia panašiai kaip for kilpa JavaScript ir gali kartoti masyvus ir objektus, kad pateiktų elementus sąraše.

Norėdami panaudoti v-už direktyvą, pateikite masyvą, kurį norite kartoti duomenis nuosavybė Parinkčių objektas Vue.

Pavyzdžiui:

<šabloną>
<ul>
<liv-už="vardas varduose">{{ vardas }}li>
ul>
šabloną>
<scenarijus>
eksportuoti numatytasis {
 duomenys () {
 return {
 vardai: ['Jonas', 'Doe', 'James'],
 };
 },
};
scenarijus>

Aukščiau pateiktame kodo bloke pavaizduotas „Vue“ programos, kuri naudoja v-už direktyvą kartoti vardai masyvas, pateiktas duomenis nuosavybė.

v-už turi reikšmę, kuri nustatyta į išraišką su dviem dalimis: iteracijos kintamasis (vardas) ir vardai masyvas v-už Taškai. Iteracijos kintamasis turi kiekvieną vardas viduje vardai masyvas ir rodomas vardas.

Vue sukuria naują Dokumento objekto modelis (DOM) elementas kiekvienam vardas viduje vardai masyvą ir pateikia jį tinklalapyje.

Jei vardai masyvo pakeitimai (pavyzdžiui, pridedamas naujas pavadinimas arba pašalinamas senas), „Vue“ automatiškai atnaujins virtualųjį DOM ir iš naujo pateiks sąrašą, kad atspindėtų atnaujintus duomenis.

Vue taip pat siūlo būdą gauti sąrašo elemento indeksą.

<liv-už="(vardas, rodyklė) pavadinimuose">{{ vardas }} -- {{ rodyklė }}li>

Aukščiau pateiktas kodas vaizduoja kiekvieno indekso rodymo sintaksę vardas viduje vardai masyvas.

Taip pat galite naudoti v-už direktyva, kad būtų galima pereiti per skaičių diapazoną:

<liv-už="skaičius iš 10">Vue yra gražusli>

Aukščiau pateiktas kodas pateiks sąrašą su tekstu Vue yra gražus dešimt kartų. The v-už direktyva taip pat gali pereiti per skaičių diapazoną, kad pakartotinai parodytų duomenis arba atliktų operaciją. Šiuo atveju, nr iteracijos kintamasis naudojamas norint pasiekti dabartinį sąrašo elementą.

Kaip pašalinti elementus iš „Vue“ sąrašo

Galite leisti naudotojams pašalinti elementus iš žiniatinklio programos sąrašų. Ši funkcija naudinga kuriant programas, pavyzdžiui, darbų sąrašą.

Galite naudoti sandūrą JavaScript metodas (tai vienas iš būdų elementų pašalinimas iš masyvų), kad pašalintumėte elementą iš Vue sąrašo.

array.splice (startIndex, numToRemove, newElements)

Sujungimo metodas gali pridėti arba pašalinti elementus iš masyvo. Sujungimo metodas paima parametrus tokia tvarka:

1. The startIndex parametras nustato indeksą, nuo kurio pradėti keisti masyvą.
2. numToRemove nurodo elementų, kuriuos norite pašalinti iš masyvo, skaičių.
3. Galiausiai, nauji elementai parametras, kurį galite naudoti norėdami įtraukti elementus į masyvą. Jei nenurodyti jokie elementai, sandūra () pašalins tik elementus iš masyvo.

Norėdami naudoti sujungimo metodą elementui pašalinti iš Vue sąrašo, turite žinoti to elemento rodyklę. Vienas iš būdų tai pasiekti yra išlaikyti indeksas kaip argumentą metodui, kuris tvarko elemento pašalinimą.

Pavyzdžiui, prie kiekvieno masyvo pavadinimo galite pridėti mygtuką, kuris suaktyvina elemento pašalinimo metodą, kai vartotojas jį spusteli:

<šabloną>
<ul>
<liv-už="(vardas, rodyklė) pavadinimuose">
 {{ vardas }} -- {{ rodyklė }}
<mygtuką @spustelėkite="pašalinti elementą (indeksą)">Pašalintimygtuką>
li>
ul>
šabloną>

The indeksas parametras suteikia mums prieigą prie kiekvieno indekso vardas masyve, kurį ši programa perduoda kaip argumentą pašalinti daiktą metodas. The pašalinti daiktą metodas gali naudoti sandūrą būdas pašalinti a vardas nuo vardai masyvas:

<scenarijus>
eksportuoti numatytasis {
 duomenys () {
 return {
 vardai: ['Jonas', 'Doe', 'James'],
 };
 },
 metodai: {
 RemoveItem (indeksas) {
 this.names.splice (indeksas, 1);
 }
}
};
scenarijus>

Aukščiau pateiktame scenarijuje naudojamas sandūrą būdas pašalinti vieną vardą iš pateiktų vardų sąrašo. Tai automatiškai atnaujins NS sąrašą, kad atspindėtų atnaujintą masyvą.

Kaip pateikti sąrašus naudojant „Vue“ raktus

The Raktas atributas yra unikalus atributas, kurį „Vue“ naudoja kiekvieno sąrašo elemento tapatybei stebėti. Kai sąrašo elementas pasikeičia, su pagalba Raktas Atributas Vue gali greitai atnaujinti DOM, iš naujo nepateikdamas viso sąrašo.

Pažvelkime į sąrašo su raktais pateikimo Vue pavyzdį:

<šabloną>
<div>
<ul>
<liv-už="vardas varduose":Raktas="vardas.id">
 {{ vardas.vardas }}
<mygtuką @spustelėkite="removeItem (name.id)">Pašalintimygtuką>
li>
ul>
div>
šabloną>
<scenarijus>
eksportuoti numatytasis {
 duomenys () {
 return {
 vardai: [
 { id: 1, vardas: "Jonas"},
 { id: 2, vardas: "Doe"},
 { id: 3, vardas: "James"},
 ],
 };
 },
 metodai: {
 RemoveItem (raktas) {
 this.names.splice (raktas - 1, 1);
 },
 },
};
scenarijus>

Šiame pavyzdyje turite unikalių elementų sąrašą id savybių. Kodo blokas naudoja Raktas atributas su v-už direktyvą, kad būtų galima sekti kiekvieno sąrašo elemento tapatybę. Tai leidžia „Vue“ efektyviai atnaujinti DOM, kai pasikeičia sąrašas.

Jei pašalintumėte elementą iš sąrašo, „Vue“ atnaujintų DOM ir nereikėtų iš naujo pateikti viso sąrašo. Taip yra todėl, kad „Vue“ turi kiekvieno sąrašo elemento tapatybę ir gali atnaujinti tik tuos elementus, kurie pasikeitė.

The Raktas atributas turi būti unikalus kiekvieno sąrašo elemento identifikatorius. Tai gali būti an id nuosavybė arba bet koks kitas unikalus identifikatorius, kurį galima naudoti norint sekti prekę.

Naudojant Raktas atributas su v-už direktyva padeda išvengti atvaizdavimo problemų. Pavyzdžiui, pašalindama vardus, „Vue“ naudoja Raktas atributas, kad būtų išlaikyta sąrašo elementų tvarka.

Vue direktyvos yra būtinos

Čia apžvelgėte „Vue“ sąrašų pateikimo pagrindus, įskaitant elementų pašalinimą iš sąrašų ir sąrašų atvaizdavimą raktais. Suprasdami šias sąvokas, galite sukurti interaktyvias sąsajas, kurios tvarko sudėtingus duomenų sąrašus.

„Vue“ turi daugybę direktyvų, skirtų skirtingiems tikslams, įskaitant sąlyginį atvaizdavimą, įvykių privalomumą ir duomenų įrišimą. Šių nurodymų supratimas gali padėti sukurti efektyvias interaktyvias žiniatinklio programas.