[ VueJS 입문 ] v-for, 리스트 렌더링 / 반복문

• 반복 내용 처리, v-for

v-for="아이템명 in array"

수많은 데이터들을 반복되는 리스트로 뿌려야한다면 그 많은 내용을 전부 일일히 적을 수는 없을 것이다. 이럴때 사용되는 v-for 디렉티브를 이용하여 반복되는 내용을 처리해보자. 우선 간단한 장볼 리스트를 만들어 샘플을 만들어 보겠다.

https://jsfiddle.net/sunghun/th2m9ws7/45/

샘플을 보면 list라는 변수에 array 형태로 장볼 리스트들을 생성하였다. 이 내용을 li 태그에 v-for 디렉티브를 사용하여 li 를 반복적으로 list의 아이템 수 만큼 반복하여 뿌려 리스트를 만들었다.

 

• v-for 내의 현재 index값 - https://jsfiddle.net/sunghun/th2m9ws7/47/

위 리스트의 각 요소 별로 몇번째 반복인지 확인하고 싶다면 v-for 디렉티브는 반복되고 있는 반문의 index값을 제공한다.

v-for="( item, i ) in list"

여기서 item은 실제로 반복되는 하나하나의 요소를 의미하며, i는 해당 요소의 반복 index 순서를 표기한다. Index값은 0부터 시작한다.

 

• string이 아닌 object의 반복 - https://jsfiddle.net/sunghun/th2m9ws7/49/

샘플을 보면 li 태그 안에 city.name, city.distance 모두 반복되는 요소인 city안의 속성들을 'city.속성' 의 형태로 불러와 사용하고 있다.