Vue.js - v-for는 무엇인가?

 

 

 

 

프로그래밍에서 항상 나오는 단골이 for문이 아닐까 싶다. Vue.js에서도 우리가 생각하는 for문을 사용할 수 있다.

 

 

하지만 우리가 생각하는 for문과는 조금 다르게 Vue.js에서 사용하는 「v-for」문은 Rendering을 하거나 DOM에서 데이터를 처리할 때도 사용한다.

 

간단하게 반복적인 DOM을 생성할 수 있어서 Vue.js에서는 꼭 사용되는 디렉티브 중에 하나다.

 

 

그리고 v-for를 사용할 때의 중요한 부분은 배열의 대한 유니크한 「key」값을 꼭 설정해 줘야 한다.

 

 

v-for문의 종류

• 기본적인 v-for문

<v-for="<각 요소를 할당할 변수 이름> in <반복 대상 배열 또는 객체>" :key="변수의 Key값"> 

 

 

• Index를 활용한 v-for문(배열)

<v-for="(<각 요소를 할당할 변수 이름>, <인덱스>) in <반복 대상 배열 또는 객체>" :key="변수의 Key값"> 

• 객체와 Key, Index를 활용한 v-for문(객체만 사용)

<v-for="(<각 요소를 할당할 변수 이름>, <키 값>, <인덱스>)in <반복 대상 배열 또는 객체>" :key="변수의 Key값"> 

• 리터럴에 직접 적용하는 v-for문

<v-for="<각 요소를 할당할 변수 이름> in <범위 또는 배열>" :key="변수의 Key값"> 

 

 

 

 

 

 

 

 

 

 

참고 1 : https://kr.vuejs.org/v2/api/index.html#v-for

참고 2 : https://kr.vuejs.org/v2/guide/list.html#v-for-%EC%99%80-v-if