Vue-да массивларни айланиш

Vue тегларни циклда шакллантиришга имкон беради. Бунга махсус v-for директиваси ёрдамлашади. Келинг, у қандай ишлашини массивлар учун кўрамиз. Бунинг учун куйидаги массивни ясаймиз:

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

Келинг, бу массивнинг ҳар бир элементини алаҳида абзацда чиқарайлик. Бунинг учун кўринишда аввало абзац ясаймиз:

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

Энди абзацимизга v-for директивасини ёзайлик. Унинг қиймати сифатида қайталанадиган массив номи ва у массив элементларини кетма-кет оладиган ўзгарувчи кўрсатилиши керак. Бизнинг ҳолимизда массив nomi 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 рўйхат шаклида чиқаринг.