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 ցուցակ: