---

[ Vue.js 2 프로그래밍 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=12320270)

---

4. 리스트 랜더링

4.2 v-for

---

배열의 각 항목을 순회하기 위해 v-for 디렉티브를 사용합니다. 이 디렉티브는 item in array 형태의 특수 구문이 필요한데 여기서 array는 원본 데이터 배열이고 item은 순회되는 배열 엘리먼트의 별칭입니다.

4.2.1 범위를 가진 v-for

v-for 디렉티브는 정수를 받을 수도 있는데 배열/객체 대신 숫자가 전달되면 템플릿이 지정된 수만큼 반복됩니다.

4.3 배열 랜더링

---

4.3.1 배열 순회

4.3.2 객체 배열 순회

현재 항목에 인덱스를 표기해야하는 경우 아래와 같이 index라는 특수한 변수를 사용할 수 있습니다.

4.4 v-for를 이용한 객체 프로퍼티 순회

---

객체의 프로퍼티를 순회하는 데 v-for를 사용할 수 있습니다. 또한 앞에서 배열의 index를 표기한 것처럼 객체 순회 시에도 똑같이 사용할 수 있으며 그 외 각 유효범위에서는 key라는 특별한 프로퍼티에 접근할 수 있습니다.

요약

---

리스트 랜더링(v-for)

• 배열(객체)의 순회 시 v-for 디렉티브를 사용
  
  
• 배열에서의 사용
  v-for=”item in array”
  v-for=”(item, index) in array”
  
  
• 객체에서의 사용
  v-for=”value in object”
  v-for=”(value, key, index) in object”