Masīvu iterācija Vue

Vue ļauj veidot elementus cilpā. Tas tiek darīts, izmantojot īpašu directīvu v-for. Apskatīsim, kā tā strādā ar masīviem. Lai to izdarītu, izveidosim šādu masīvu:

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

Izvadīsim katru šī masīva elementu atsevišķā rindkopā. Lai to izdarītu, skatā sākumā izveidosim rindkopu:

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

Tagad pievienosim mūsu rindkopai directīvu v-for. Šīs directīvas vērtībā jānorāda iterējamā masīva nosaukums un mainīgais, kurā secīgi tiks ievietoti šī masīva elementi. Mūsu gadījumā masīva nosaukums būs arr, un mainīgajam mēs izdomāsim nosaukumu elem:

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

Rezultātā mūsu rindkopa atkārtosies tik reižu, cik elementu ir mūsu masīvā. Izvadīsim iterētos elementus mūsu rindkopu tekstā:

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

Lai data glabājas šāds masīvs:

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

Izvadiet katru šī masīva elementu savā div elementā.

Dots šāds masīvs:

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

Izvadiet katra šī masīva elementa kvadrātu savā div elementā.

Dots šāds masīvs:

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

Izvadiet šī masīva elementus ul saraksta veidā.