Iterera över arrayer i Vue

Vue låter dig skapa taggar i en loop. Detta görs med ett speciellt direktiv v-for. Låt oss se hur det fungerar för arrayer. För att göra detta, låt oss skapa följande array:

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

Låt oss visa varje element i denna array i ett separat stycke. För att göra detta, i vyn, låt oss först skapa ett stycke:

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

Nu skriver vi direktivet v-for till vårt stycke. Värdet på detta direktiv ska anges som namnet på arrayen som itereras över och variabeln i vilken elementen sekventiellt kommer att placeras. I vårt fall kommer arrayens namn att vara arr, och för variabeln kommer vi att välja namnet elem:

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

Som ett resultat kommer vårt stycke att upprepas lika många gånger som det finns element i vår array. Låt oss visa de itererade elementen i texten i våra stycken:

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

Låt följande array lagras i data:

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

Visa varje element i denna array i sin egen div-tagg.

Följande array ges:

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

Visa kvadraten på varje element i denna array i sin egen div-tagg.

Följande array ges:

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

Visa elementen i denna array som en ul-lista.