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를 추가하고 또 소괄호를 사용한 점이 차이점입니다.