Массивҳоро дар Vue такрор кардан

Vue барои сохтани тегҳо дар давр имкон медиҳад. Ин бо истифода аз директиваи махсус v-for анҷом дода мешавад. Биёед бинем, ки он барои массивҳо чӣ гуна кор мекунад. Барои ин мазмуни зеринро месозем:

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

Биёед ҳар як элемент ин массивро дар абзази ҷудогона чоп кунем. Барои ин дар намоиш аввал абзаз созем:

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

Акнун ба абзази мо директиваи v-for-ро нависем. Қимати ин директива бояд номи массиви такроршаванда ва тағире, ки ба таври пай дар пай элементҳои ин массив дар он меафтад, муайян карда шавад. Дар ҳолати мо номи массив arr хоҳад буд, ва барои тағирёбанда мо номи elem-ро ихтиёр мекунем:

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

Дар натиҷа абзази мо такрор хоҳад шуд ба ҳаҷми он чӣ қадар элементҳо дар массиви мо мавҷуданд. Биёед элементҳои такроршавандаро дар матн абзазҳои мо чоп кунем:

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

Бигзор дар data массиви зерин нигоҳ дошта шавад:

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

Ҳар як элементи ин массивро дар теги худ div чоп кунед.

Массиви зерин дода шудааст:

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

Чоркунҷаи ҳар як элемент ин массивро дар теги худ div чоп кунед.

Массиви зерин дода шудааст:

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

Элементҳои ин массивро ба шакли рӯйхати ul чоп кунед.