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 목록 형태로 출력하세요.