[Vue] Vue의 반복문 v-for

1. v-for 반복문

 

코드를 짜다보면 반복되는 코드가 많을 때, 길이가 길어지고 복잡해지는 안 좋은 현상이 일어날 경우가 있다.

이럴 경우에는 반복문을 사용한다.

 

 

v-for 반복문은 배열, 객체, 태그 등 어느 곳에서나 사용할 수 있다.

 

 

 

 

 2. 기본 문법

 

 

기본적으로 반복문은 원하는 태그에 v-for = "작명 in 반복할횟수" 를 작성하면 된다.

 

 

기본문법

 

 Vue 에서는 반복문 뒤에 오는 값 하나하나에 유니크한 값을 선언해줄 것을 권장하며,

이는  :key = "작명" 을 통해 작성할 수 있다.

 

:key 속성은 쉽게 말해 반복되는 요소들을 각각 구분짓기 위한 속성이다.

 

 

 

 

 

 

 

 

<div class="menu">
	<a v-for = "i in 메뉴들" :key="i">{{i}}</a>
</div>

 

data() {
    return {
      메뉴들 : ['Home', 'Shop', 'About']
    }
}

 

 

 

위 예제를 보면 반복할 횟수 자리에 메뉴들을 넣었기 때문에

데이터보관함에 있는 메뉴들이라는 배열 데이터 갯수만큼 반복문이 돌아가는 것 이다. ( 위 코드에서는 3번 )

 

 

또한 key 값과 화면에 보여지는 변수는 메뉴들 안에 있는 데이터들이 되었기 때문에,

i의 값은 배열 안 요소들이 차례대로 들어오게 된다.

 

 

 

즉,  Home -> Shop -> About 이 순서대로 출력되는 것

 

 

출력 결과

 

 

 

3.  index 사용 ( 2개의 작명 )

 

for문에서 index가 있던 것과 같이 v-for에서도 index 값을 사용할 수 있다.

 

 

  <div class="menu">
    <a v-for = "(i, index) in 메뉴들" :key="i">{{i}} ({{ index }})</a>
  </div>

 

 

소괄호를 열면 2개의 작명까지 허용되는데, 

 

1번째 작명 ( i )는 앞서 설명했던 것과 같이 메뉴들 안의 데이터가 되는 것이고

2번째 작명 ( index ) 는 0부터 1씩 증가하는 정수가 된다. ( 배열의 index 값과 동일 )

 

 

출력 결과

 

위와 같이 인덱스 값을 편하게 볼 수 있게 된다.