[Vue3] 리스트 렌더링

v-for

v-for 디렉티브를 사용하여 배열인 목록을 렌더링 할 수 있습니다.

const items = reactive([
  { id: 1, message: 'Java' },
  { id: 2, message: 'HTML' },
  { id: 3, message: 'CSS' },
  { id: 4, message: 'JavaScript' },
]);

<li v-for="(item, index) in items" :key="item.id">
  {{ item.message }}
</li> 

• v-for=”item in items” 문법을 사용해서 배열에서 항목을 순차적으로 할당합니다.
• v-for=”(item, index) in items” 문법을 사용해서 배열 인덱스를 가져올 수 있습니다.
• 항목을 나열할 때 각 :key 속성에는 고유한 값을 지정해야 합니다. (vue 2.2.0 부터 필수)

v-for 객체

v-for를 사용하여 객체의 속성을 반복 할 수도 있습니다.

const myObject = reactive({
  title: '제목입니다.',
  author: '홍길동',
  publishedAt: '2016-04-10',
});

<li v-for="(value, key, index) in myObject" :key="key">
	{{ key }} - {{ value }} - {{ index }}
</li>