Vue'de Dizi Döngüleri

Vue, etiketleri döngü içinde oluşturmanıza izin verir. Bu, özel v-for direktifi kullanılarak yapılır. Haydi, diziler için nasıl çalıştığını görelim. Bunun için aşağıdaki diziyi oluşturalım:

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

Bu dizinin her elemanını ayrı bir paragrafta gösterelim. Bunun için görünümde (template) başlangıç olarak bir paragraf oluşturalım:

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

Şimdi paragrafımıza v-for direktifini yazalım. Bu direktifin değeri olarak, döngüye alınacak dizinin adını ve bu dizinin elemanlarının sırayla atanacağı değişkeni belirtmelisiniz. Bizim durumumuzda dizi adı arr olacak, ve değişken için elem adını kullanacağız:

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

Sonuç olarak, paragrafımız dizimizdeki eleman sayısı kadar tekrarlanacak. Döngüdeki elemanları paragraflarımızın metin içinde gösterelim:

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

data içinde aşağıdaki dizi bulunsun:

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

Bu dizinin her elemanını kendi div etiketiniz içinde gösterin.

Aşağıdaki dizi verilsin:

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

Bu dizinin her elemanının karesini kendi div etiketiniz içinde gösterin.

Aşağıdaki dizi verilsin:

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

Bu dizinin elemanlarını ul listesi şeklinde gösterin.