VueJS에서 반복문을 사용할 수 있는 v-for디렉티브를 알아보겠습니다.

v-for는 템플릿에 사용하며 여러 개의 값을 가진 데이터를 루프를 사용하여 한 번에 출력할 수 있는 유용한 방법입니다. 이때 사용 방법은 아래와 같습니다.

v-for="item in Items"

여기서 Items난 VueJS에 설정된 데이터 값입니다. 그렇다면 간단한 예제를 사용하여 알아봅니다.



# vuejs v-for 예제보기아래는 사이트 정보를 가진 data인 변수 MyItems에서 v-for를 사용해 모든 name값을 출력해보려고합니다. 이를 위해서 아래와 같이 코드를 작성합니다.
<ul>
  <li v-for="item in MyItems">{{ item.name }}</li>
</ul>

MyItems이 루프를 돌면서 item으로 하나의 아이템 정보를 가져올 수 있고 item 객체의 name을 표현식을 사용하여 {{ item.name }}으로 출력하였습니다. 이때 data가 가진 값은 아래처럼 data에 설정되어 있습니다.
new Vue({
  el: '#myApp',
  data: {
    MyItems: [
      { id: 1, name: 'web' },
      { id: 2, name: 'is' },
      { id: 3, name: 'free' }
    ]
  }
})

위 코드를 실행하면 아래처럼 나타날 것입니다.
• web
• is
• free

이처럼 간단하게 루프를 돌며 출력할 수 있습니다.


! 아이템의 순서, index를 보여주려면?만약 아이템의 순서인 index 숫자가 필요한 경우? 이때는 아래처럼 v-for에 index를 추가하면 쉽게 사용할 수 있습니다.
<li v-for="(item, index) in MyItems">{{ index + ' : ' + item.name }}</li>

index를 추가하고 또 소괄호를 사용한 점이 차이점입니다.


! :key 속성 사용하기v-for 반복문 사용시 :key를 사용할 수 있습니다. 이때 키 속성의 값으로는 for 루프의 값 중 하나를 설정하는데 아래와 같은 모습을 가지게됩니다.
<ul>
  <li v-for="item in myItems" :key="number">
    {{ item.number }}
    {{ item.name }}
  </li>
</ul>

여기서 key를 설정하지 않아도 View에서는 아무런 차이가 없습니다. 다만 key 설정은 권장되는 방법으로 설정시 VirtualDOM에서 해당 값에 대하여 루프의 인덱스 기준을 대신하여 동작하므로 성능 측면에서 더 우수하다고 합니다. 이때 설정될 값은 루프에서 변경되거나 업데이트 될 값이 키로 설정되어야합니다.