vue 3 - v-for 반복문

😎 vue 3 - v-for 반복문

composition API를 기준으로 합니다

✅  v-for

v-for을 사용하여 배열을 리스트로 렌더링할 수 있다
v-for 사용 시엔 각 엘리먼트를 추적해서 재사용 및 재정렬이 가능하도록 하기 위해 각 항목에 대한 고유 key 속성이 있어야 한다
즉, 리스트의 순서를 변경하거나 데이터의 추가, 삭제 등 재정렬이 필요할 경우 해당 엘리먼트의 상태를 유지하기 위해 고유한 key 값이 필요하다

// v-bind:key는 :key로 축약 사용이 가능하다
<li v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.message }}
</li>

const items = ref([
	{ 
      id: 1,
      message: 'itemA' 
    }, 
    { 
      id: 2,
      message: 'itemB' 
    }
])

결과는 아래와 같다

items는 렌더링할 배열이며, item은 배열 내 반복되는 엘리먼트, index는 아이템 인덱스를 의미한다
v-for은 해당 데이터의 길이가 0이면 해당 엘리먼트를 그리지 않는다

 

다른 방식으로는 숫자 범위 내에서 반복문을 사용할 수 있다

<ul>
  <li v-for="n in 10">{{ n }}</li> // n은 1부터 시작한다
</ul>

결과는 아래와 같다

 

가능한 한 언제나 v-for는 key 속성과 함께 사용하는 것을 권장합니다.

 

 

 

https://v3-docs.vuejs-korea.org/guide/essentials/list.html

리스트 렌더링 | Vue.js