Tömbök bejárása Vue-ban

A Vue lehetővé teszi címkék létrehozását ciklusban. Ezt a speciális v-for direktívával tehetjük meg. Nézzük meg, hogyan működik tömbök esetén. Ehhez készítsük el a következő tömböt:

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

Jelenítsük meg a tömb minden elemét külön bekezdésben. Ehhez a nézetben először készítsünk egy bekezdést:

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

Most írjuk a bekezdésünkhez a v-for direktívát. Ennek az értékeként az bejárni kívánt tömb nevét és egy változót kell megadnunk, amelybe egymás után bekerülnek a tömb elemei. Esetünkben a tömb neve arr, a változó neve pedig legyen elem:

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

Ennek eredményeképpen a bekezdésünk annyiszor ismétlődik meg, ahány elem van a tömbben. Most jelenítsük meg a bejárt elemeket a bekezdések szövegében:

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

Tároljuk a data-ban a következő tömböt:

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

Jelenítsd meg a tömb minden elemét saját div címkében.

Adott a következő tömb:

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

Jelenítsd meg a tömb minden elemének négyzetét saját div címkében.

Adott a következő tömb:

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

Jelenítsd meg a tömb elemeit ul listában.