[VueJS] vue 반복문, 리스트 렌더링 v-for 사용방법 (ft. 객체 반복)

vueJS에서 제공하는 반복문, 리스트 렌더링 v-for 구문에 대해 알아보자.

vueJS를 사용한다면 가장 많이 사용하는 구문 중 하나일 것이다.

예제 코드를 통해 바로 접해보자.

▷ 예제1) v-for 구문 기본 사용법

<div id='it_list'>
    <ul>
        <li v-for="item in list">
        {{item}}
        </li>
    </ul>
</div>

new Vue({
  el: '#it_list',
  data: {
    list : ['mine','it','record']
  }
});

▷ 결과

기본적인 사용방법은 예제에 나와있는 것처럼 배열 데이터를 가지고 반복문에 사용될 태그에 v-for 구문을 삽입해주면 된다.

▷ 예제2) index 사용하기

<div id='it_list'>
    <ul>
      <li v-for="(item,index) in list">
        {{item}} ({{index}})
      </li>
    </ul>
</div>

▷ 결과

for문에 index가 있는것처럼 v-for 역시 index값을 사용할 수 있다.

이는 html 구문에서 위 예제처럼 사용해주면된다.

▷ 예제3) 객체를 담고 있는 배열 데이터

<div id='it_list'>
    <div v-for="(item,index) in list">
      name : {{item.name}} <br>
      title : {{item.title}} <br>
      index : {{index}}
      <hr>
    </div>
</div>

new Vue({
  el: '#it_list',
  data: {
    list : [
      {name : "mine" , title : "vue"},
      {name : "it" , title : "v-for"},
      {name : "record" , title : "list"}
    ]
  }
});

▷ 결과

▷ 예제4) key값 바인딩

<div id='it_list'>
    <div v-for="(item,index) in list" :key="index">
      name : {{item.name}} <br>
      title : {{item.title}} <br>
      index : {{index}}
      <hr>
    </div>
</div>

vue 가이드에서는 v-for에 사용되는 대상 하나하나에 유니크한 key값을 선언해줄것을 권장하는데,

없어도 사용은 가능하나 나중에 꼭 key값을 줘야만 하는 상황이 생길 수 있어서 주입하는 습관을 들이면 좋다.

▷ 예제5) Object 객체 반복문

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

▷ 결과