Masyvų iteravimas Vue

Vue leidžia kurti žymes cikle. Tai daroma naudojant specialią direktyvą v-for. Pažiūrėkime, kaip ji veikia su masyvais. Norėdami tai padaryti, sukurkime tokį masyvą:

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

Išveskime kiekvieną šio masyvo elementą atskiroje pastraipoje. Norėdami tai padaryti, pirmiausia sukurkime pastraipą:

<template>
	<p></p>
</template>

Dabar pritaikykime mūsų pastraipai direktyvą v-for. Šios direktyvos reikšmėje turėtumėte nurodyti iteruojamo masyvo pavadinimą ir kintamąjį, į kurį paeiliui bus patalpinami šio masyvo elementai. Mūsų atveju masyvo pavadinimas bus arr, o kintamajam sugalvosime pavadinimą elem:

<template>
	<p v-for="elem in arr"></p>
</template>

Dėl to mūsų pastraipa pakartos tiek kartų, kiek elementų yra mūsų masyve. Išveskime iteruojamus elementus mūsų pastraipų tekste:

<template>
	<p v-for="elem in arr">{{ elem }}</p>
</template>

Tegul data saugo šį masyvą:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Išveskite kiekvieną šio masyvo elementą savo div žymėje.

Duotas toks masyvas:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Išveskite kiekvieno šio masyvo elemento kvadratą savo div žymėje.

Duotas toks masyvas:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Išveskite šio masyvo elementus kaip ul sąrašą.