Vue 반복문 v-for 배열, 객체 렌더링

v-for 구문을 이용해서 반복문을 사용해서 배열이나 객체를 순서대로 렌더링 할 수 있습니다.

 

배열 v-for

const App = {
   data() {
     return {
       array: ['superman', 'batman', 'pororo']
     }
   },
}

배열의 경우 v-for문의 앞부분은 배열의 항목이고 뒷부분은 배열의 이름입니다.

  <ul>
    <li v-for="hero in array">{{ hero }}</li>
  </ul>

결과

• superman
• batman
• pororo

객체 v-for

const App = {
   data() {
     return {
       object: {
         1: 'superman',
         2: 'batman',
         3: 'pororo'
       }
     }
   },
}

객체의 경우 첫번째 인자는 값이고 두번째 인자는 객체의 key 값입니다.

아래와 같이 사용할 수 있습니다.

  <ul>
    <li v-for="(value, key) in object">{{ key }} : {{value}}</li>
  </ul>

결과

• 1 : superman
• 2 : batman
• 3 : pororo

See the Pen Untitled by powerku (@powerku) on CodePen.