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 тизмеси түрүндө чыгарыңыз.