Vue에서 배열 순회하기

Vue는 루프를 사용하여 태그를 생성할 수 있게 해줍니다. 이는 특별한 지시어 v-for를 사용하여 수행됩니다. 배열에 대해 어떻게 작동하는지 살펴보겠습니다. 다음 배열을 만들어 봅시다:

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

이 배열의 각 요소를 별도의 단락으로 출력해 봅시다. 이를 위해 뷰에서 먼저 단락을 만듭니다:

App.vue<template>
  <p></p>
</template>

이제 단락에 지시어 v-for를 작성합니다. 이 지시어의 값으로는 순회할 배열의 이름과 해당 배열의 요소가 순차적으로 들어갈 변수를 지정해야 합니다. 우리의 경우 배열 이름은 arr가 되며, 변수 이름은 elem로 정해 봅시다:

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

결과적으로 우리의 단락은 배열의 요소 수만큼 반복됩니다. 순회하는 요소를 단락 텍스트 안에 출력해 봅시다:

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

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

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

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