[Vue.js] <template>에서 v-for 디렉티브 사용하기

<template>
  <div>
    <!-- 첫 번째 예제: v-for를 사용하여 여러 엘리먼트 블록 렌더링 -->
    <template v-for="item in items">
      <h2>{{ item.title }}</h2>
      <p>{{ item.description }}</p>
    </template>

    <!-- 두 번째 예제: 동적으로 생성된 엘리먼트에 v-for 사용 -->
    <template>
      <template v-for="n in count" :key="n">
        <div>{{ n }}</div>
      </template>
    </template>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    // 첫 번째 예제를 위한 데이터 배열
    const items = reactive([
      { title: '제목 1', description: '내용 1' },
      { title: '제목 2', description: '내용 2' },
      { title: '제목 3', description: '내용 3' }
    ]);

    // 두 번째 예제를 위한 반복 횟수
    const count = 5;

    return { items, count };
  }
};
</script>

<style scoped>
/* 컴포넌트에만 적용될 스타일을 작성할 수 있습니다. */
</style>

Vue에서 태그에 v-for 디렉티브를 사용하여 여러 엘리먼트 블록을 렌더링하는 방법에 대해 알아봅시다.

첫 번째 예제에서는 v-for 디렉티브를 사용하여 items 배열의 각 요소를 반복하고, 각 요소의 title과 description을 출력합니다. 태그에 v-for 디렉티브를 사용하여 여러 엘리먼트 블록을 생성하고, 각 블록에 데이터를 표시합니다.

두 번째 예제에서는 v-for 디렉티브를 사용하여 반복 횟수에 따라 동적으로 생성된 엘리먼트 블록을 렌더링합니다. 반복 횟수를 지정하는 변수 count를 사용하여 태그에 v-for 디렉티브를 적용하고, 각 블록에는 1부터 count까지의 숫자를 출력합니다.

태그에 v-for 디렉티브를 사용하면 여러 엘리먼트 블록을 효율적으로 렌더링할 수 있습니다. 이를 활용하여 동적으로 생성되는 엘리먼트를 효과적으로 관리할 수 있습니다.