Vòng lặp mảng trong Vue

Vue cho phép tạo các thẻ trong một vòng lặp. Điều này được thực hiện bằng chỉ thị đặc biệt v-for. Hãy cùng xem cách nó hoạt động với mảng. Để làm điều này, hãy tạo mảng sau:

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

Hãy xuất ra mỗi phần tử của mảng này trong một đoạn văn riêng biệt. Để làm điều này trong template, trước tiên hãy tạo một đoạn văn:

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

Bây giờ hãy viết chỉ thị v-for cho đoạn văn của chúng ta. Giá trị của chỉ thị này cần được chỉ định là tên của mảng cần lặp và biến, trong đó các phần tử của mảng này sẽ lần lượt được đặt vào. Trong trường hợp của chúng ta, tên mảng sẽ là arr, còn cho biến, chúng ta sẽ đặt tên là elem:

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

Kết quả là đoạn văn của chúng ta sẽ lặp lại số lần bằng số phần tử trong mảng của chúng ta. Hãy xuất ra các phần tử được lặp trong nội dung của các đoạn văn của chúng ta:

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

Giả sử trong data có lưu mảng sau:

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

Hãy xuất mỗi phần tử của mảng này trong thẻ div riêng của nó.

Cho mảng sau:

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

Hãy xuất bình phương của mỗi phần tử mảng này trong thẻ div riêng của nó.

Cho mảng sau:

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

Hãy xuất các phần tử của mảng này dưới dạng danh sách ul.