[Udemy Vue 완벽가이드 Section3] 45. v-for 자세히 알아보기

배열에 v-for를 활용해보았는데, 이 방식이 v-for의 가장 흔한 활용방식.

이 외에도 흥미로운 변형이 있다.

 

먼저, 배열 내 항목 외에도 다양한 데이터를 출력할 수 있다.

 

# index

배열 내 항목의 index도 출력할 수 있는데, v-for에 괄호를 넣고, 뒤에 쉼표를 붙이고 두 번째 항목을 입력한다.

index나 idx처럼 이름은 임의로 설정하면 된다. 그러면 해당 항목의 index가 출력된다.

Vue에서 지원하는 또 다른 구문이다.

 

이 표기법을 이용하면 항목 뿐만 아니라, 해당 항목의 index도 출력가능하다.

<li v-for="(goal, index) in goals">{{ goal }} - {{ index }}</li>

 

# 객체

배열 외에도 객체에 v-for를 사용할 수 있다. 보통 배열에 사용하지만, 객체에 사용해야 할 때도 있다.

<li v-for="{name: 'ria', age: 30}"></li>

Vue앱의 data 프로퍼티로도 객체를 만들 수 있다. (위 방식보다는, 객체를 JS에 작성하는게 더 좋다.)

 

 

이렇게 추가한 객체와 그 프로퍼티에 loop를 걸어보자.

in 키워드를 통해서 v-for에서 지원하는 동작을 활용해보자.

<li v-for="value in {name: 'ria', age: 30}">{{ value }}</li>

 

1/ 이렇게 작성하면, 객체의 각 property의 값(value)들이 나온다.

 

 

 

2/ 배열에 loop를 걸어 각 값의 index를 출력하는 것처럼, 객체에 loop를 걸어 key를 출력할 수도 있다.

key, k 등 원하는 대로 작성 가능.

<ul>
 <li v-for="(value, key) in {name: 'ria', age: 30}">{{ key }} : {{ value }}</li>
</ul>

 

 

3/ 필요한 경우, index가 표시되도록 설정할 수도 있다.

<ul>
 <li v-for="(value, key, index) in {name: 'ria', age: 30}">{{ key }} : {{ value }} - {{ index }}</li>
</ul>

 

이렇게 v-for를 객체에도 사용할 수 있고, 이를 통해 value부터 key, index까지 표시할 수 있다.

 

 

# number

v-for를 이용해 숫자의 범위에도 loop를 걸 수 있다. 이렇게 숫자의 범위로 루프를 걸고자 할 때에도 v-for에서 num과 in 키워드를 이용하면 간단하다.

<li v-for="num in 10">{{ num }}</li>

 

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.