[Vue.js] 객체에 v-for 디렉티브 사용하기

<template>
  <div>
    <!-- 첫 번째 예제: 객체의 속성을 반복하여 출력하기 -->
    <ul>
      <li v-for="(value, key) in user" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>

    <!-- 두 번째 예제: 객체의 특정 속성만 반복하여 출력하기 -->
    <ul>
      <li v-for="skill in skills" :key="skill">
        기술: {{ skill }}
      </li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    // 첫 번째 예제를 위한 사용자 객체 생성
    const user = reactive({
      name: '홍길동',
      age: 30,
      gender: '남성'
    });

    // 두 번째 예제를 위한 기술들 배열
    const skills = ['JavaScript', 'Vue.js', 'HTML', 'CSS'];

    return { user, skills };
  }
};
</script>

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

Vue에서 v-for 디렉티브를 사용하여 객체의 속성을 반복하는 방법에 대해 알아봅시다.

첫 번째 예제에서는 v-for 디렉티브를 사용하여 객체(user)의 속성을 반복하고, 각 속성의 키(key)와 값(value)을 출력합니다. v-for 디렉티브에 (value, key) 구문을 사용하여 객체의 각 속성을 반복하고, 키와 값의 쌍을 표시합니다.

두 번째 예제에서는 객체(skills)의 특정 속성만 반복하여 출력합니다. skills 배열에 있는 각 기술을 반복하고, 각 기술의 이름을 표시합니다.

Vue에서 v-for 디렉티브를 사용하여 객체의 속성을 반복하면, 해당 객체의 키-값 쌍을 편리하게 출력할 수 있습니다. 이를 통해 다양한 형태의 데이터를 반복하여 효율적으로 처리할 수 있습니다.