Pengulangan Array dalam Vue

Vue membolehkan pembentukan tag dalam gelung. Ini dilakukan menggunakan arahan khas v-for. Mari kita lihat, bagaimana ia berfungsi untuk array. Untuk ini, mari buat array berikut:

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

Mari kita keluarkan setiap elemen array ini dalam perenggan berasingan. Untuk ini, dalam persembahan pertama-tama mari buat perenggan:

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

Sekarang tulis arahan v-for untuk perenggan kami. Nilai arahan ini hendaklah dinyatakan nama array yang diulang dan pembolehubah, yang secara berurutan akan menerima elemen array ini. Dalam kes kami, nama array ialah arr, dan untuk pembolehubah kami akan gunakan nama elem:

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

Hasilnya, perenggan kami akan berulang sebanyak kali bilangan elemen dalam array kami. Mari kita keluarkan elemen yang diulang dalam teks perenggan kami:

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

Katakan dalam data disimpan array berikut:

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

Keluarkan setiap elemen array ini dalam tag divnya sendiri.

Diberi array berikut:

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

Keluarkan kuasa dua setiap elemen array ini dalam tag divnya sendiri.

Diberi array berikut:

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

Keluarkan elemen array ini dalam bentuk senarai ul.