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 тізімі түрінде шығарыңыз.