Arrays doorlopen in Vue

Vue maakt het mogelijk om tags in een lus te genereren. Dit wordt gedaan met behulp van de speciale directive v-for. Laten we eens kijken hoe het werkt voor arrays. Laten we hiervoor de volgende array maken:

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

Laten we elk element van deze array in een aparte alinea weergeven. Laten we hiervoor in de template eerst een alinea maken:

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

Laten we nu onze alinea de directive v-for geven. Als waarde van deze directive moet je de naam van de array die doorlopen wordt en de variabele opgeven, waarin opeenvolgend de elementen van deze array zullen worden geplaatst. In ons geval is de naam van de array arr, en voor de variabele bedenken we de naam elem:

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

Als gevolg zal onze alinea zich herhalen zoveel keer als er elementen in onze array zijn. Laten we de doorlopen elementen in de tekst van onze alinea's weergeven:

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

Stel dat in data de volgende array is opgeslagen:

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

Geef elk element van deze array weer in zijn eigen div tag.

Gegeven de volgende array:

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

Geef het kwadraat van elk element van deze array weer in zijn eigen div tag.

Gegeven de volgende array:

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

Geef de elementen van deze array weer als een ul lijst.