Arrays in Vue durchlaufen

Vue ermöglicht es, Tags in einer Schleife zu generieren. Dies geschieht mit der speziellen Direktive v-for. Sehen wir uns an, wie sie für Arrays funktioniert. Dazu erstellen wir das folgende Array:

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

Lassen Sie uns jedes Element dieses Arrays in einem eigenen Absatz ausgeben. Dazu erstellen wir zunächst im Template einen Absatz:

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

Jetzt weisen wir unserem Absatz die Direktive v-for zu. Als Wert dieser Direktive sollte der Name des zu durchlaufenden Arrays und die Variable angegeben werden, in die nacheinander die Elemente dieses Arrays platziert werden. In unserem Fall ist der Name des Arrays arr, und für die Variable denken wir uns den Namen elem aus:

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

Als Ergebnis wird unser Absatz so oft wiederholt, wie Elemente in unserem Array vorhanden sind. Lassen Sie uns die durchlaufenen Elemente im Text unserer Absätze ausgeben:

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

Angenommen, in data ist das folgende Array gespeichert:

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

Geben Sie jedes Element dieses Arrays in seinem eigenen div-Tag aus.

Gegeben ist das folgende Array:

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

Geben Sie das Quadrat jedes Elements dieses Arrays in seinem eigenen div-Tag aus.

Gegeben ist das folgende Array:

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

Geben Sie die Elemente dieses Arrays als ul-Liste aus.