Gennemløb af arrays i Vue

Vue tillader at danne tags i en løkke. Dette gøres ved hjælp af det specielle direktiv v-for. Lad os se, hvordan det fungerer for arrays. For at gøre dette, lad os oprette følgende array:

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

Lad os udskrive hvert element fra dette array i en separat afsnit. For at gøre dette i presentationen, lad os først lave et afsnit:

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

Lad os nu skrive direktivet v-for til vores afsnit. Værdien af dette direktiv skal angive navnet på arrayet, der gennemløbes, og variablen, som elementerne fra dette array successivt vil blive placeret i. I vores tilfælde vil arrayets navn være arr, og for variablen finder vi på navnet elem:

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

Som et resultat vil vores afsnit blive gentaget lige så mange gange, som der er elementer i vores array. Lad os udskrive de gennemløbne elementer i teksten i vores afsnit:

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

Lad følgende array være gemt i data:

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

Udskriv hvert element af dette array i sin egen div-tag.

Givet følgende array:

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

Udskriv kvadratet af hvert element af dette array i sin egen div-tag.

Givet følgende array:

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

Udskriv elementerne i dette array som en ul-liste.