Vue.js 반복문 활용하기: 반응형 데이터로 동적인 리스트 만들기

Vue.js에서 반복문을 사용하여 동적인 리스트를 만드는 방법에 대해 알아보겠습니다. Vue의 Single File Component(SFC) 형식을 사용하여 다양한 예제를 제시하겠습니다.

예제 1: 배열 요소 반복하기

파일명: ArrayExample.vue

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    };
  }
};
</script>

출력 결과:

• Apple
• Banana
• Cherry

설명:
이 예제에서는 Vue의 반복문 디렉티브인 v-for를 사용하여 배열의 각 요소를 반복하여 출력합니다. items 배열의 각 객체는 고유한 id와 name 속성을 가지고 있으며, v-for 디렉티브를 통해 각 객체의 name 속성을 출력합니다.

예제 2: 객체 반복하기

파일명: ObjectExample.vue

<template>
  <div>
    <ul>
      <li v-for="(value, key) in person" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: 'John',
        age: 30,
        gender: 'Male'
      }
    };
  }
};
</script>

출력 결과:

• name: John
• age: 30
• gender: Male

설명:
이 예제에서는 Vue의 v-for 디렉티브를 사용하여 객체의 속성을 반복하여 출력합니다. person 객체의 각 속성을 키와 값으로 분리하여 출력합니다.

위의 예제를 통해 Vue.js에서 반복문을 활용하여 동적인 리스트를 만드는 방법을 자세히 살펴보았습니다. 이를 통해 Vue.js를 사용하여 다양한 반복 작업을 수행할 수 있습니다.