Vue.js
렌더링 목록

기본 사용법

목록은 v-for 지정. v-for 사용하여 표현할 수 있습니다. 구문을 사용하려면 반복 할 원본 배열과 반복되는 각 항목을 참조하는 데 사용되는 별칭을 지정해야합니다. 다음 예제에서는 items 을 소스 배열로 사용하고 item 을 각 항목의 별칭으로 사용합니다.

HTML

<div id="app">
  <h1>My List</h1>
  <table>
    <tr v-for="item in items">
      <td>{{item}}</td>
    </tr>
  </table>
</div>

스크립트

new Vue({
  el: '#app',
  data: {
    items: ['item 1', 'item 2', 'item 3']
  }
})

여기서 데모를 볼 수 있습니다.

HTML 항목 만 렌더링

이 예제에서는 다섯 개의 <li> 태그를 렌더링합니다.

<ul id="render-sample">
  <li v-for="n in 5">
    Hello Loop
  </li>
</ul>

돼지 카운트 다운 목록

<ul>
  <li v-for="n in 10">{{11 - n}} pigs are tanning at the beach. One got fried, and
</ul>

https://jsfiddle.net/gurghet/3jeyka22/

객체에 대한 반복

v-for 는 객체 키 (및 값)를 반복하는 데 사용할 수 있습니다.

HTML :

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

스크립트:

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})