10_목록 랜더링

1.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속성에는 필수적으로 고유값을 지정해야함!

 

2.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>