Gjennomgang av arrays i Vue

Vue tillater å danne tags i en loop. Dette gjøres ved hjelp av det spesielle direktivet v-for. La oss se hvordan det fungerer for arrays. For å gjøre dette, la oss lage følgende array:

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

La oss vise hvert element i dette arrayet i sin egen avsnitt. For å gjøre dette i visningen, la oss først lage et avsnitt:

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

La oss nå skrive direktivet v-for for vårt avsnitt. Verdien av dette direktivet skal spesifisere navnet på arrayet som gjennomgås og variabelen som sekvensielt vil motta elementene fra dette arrayet. I vårt tilfelle vil navnet på arrayet være arr, og for variabelen kommer vi til å finne på navnet elem:

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

Som et resultat vil avsnittet vårt gjentas så mange ganger som det er elementer i arrayet vårt. La oss vise de gjennomgåtte elementene i teksten i våre avsnitt:

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

La følgende array lagres i data:

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

Vis hvert element i dette arrayet i sin egen div-tag.

Følgende array er gitt:

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

Vis kvadratet av hvert element i dette arrayet i sin egen div-tag.

Følgende array er gitt:

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

Vis elementene i dette arrayet som en ul-liste.