Vue-da massivlarni aylantirish

Vue teglarni tsikl shaklida hosil qilishga imkon beradi. Buning uchun maxsus v-for direktivasidan foydalaniladi. Keling, u massivlar bilan qanday ishlashini ko'rib chiqaylik. Buning uchun quyidagi massivni yaratamiz:

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

Keling, ushbu massivning har bir elementini alohida abzatsda chiqaramiz. Buning uchun tasvir (template)da avvalo abzats yaratamiz:

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

Endi abzatsimizga v-for direktivasini yozamiz. Ushbu direktivaning qiymati sifatida aylantirilayotgan massivning nomi va ushbu massiv elementlari ketma-ket joylashtiriladigan o'zgaruvchi ko'rsatiladi. Bizning holatda massiv nomi arr, o'zgaruvchi uchun esa elem nomini topamiz:

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

Natijada bizning abzatsimiz massivdagi elementlar soni qadar takrorlanadi. Keling, aylantirilayotgan elementlarni abzatslarimiz matnida chiqaramiz:

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

data da quyidagi massiv saqlansin:

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

Ushbu massivning har bir elementini o'z div tegida chiqaring.

Quyidagi massiv berilgan:

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

Ushbu massivning har bir elementining kvadratini o'z div tegida chiqaring.

Quyidagi massiv berilgan:

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

Ushbu massiv elementlarini ul ro'yxat ko'rinishida chiqaring.