VUEJS) v-for, v-bind

v-for 사용법

js

const vm = new Vue({
  el: '#app',
  data: {
    items: [
      {
        id:'1',
        message: 'Hello  World'
      },
      {
        id:'2',
        message: 'Good Job'
      },
      {
        id:'3',
        message: 'My first Vue'
      }
      ]
  }
})

itmes라는 데이터 배열에는 동일한 형식의 3개의 객체가 들어간다.
고유한 (id) 값이 있어야 한다.

html

<div id="app">
  <ul>
    <li v-for="item in items"
        v-bind:key="item.id">
      {{ item.message }}
    </li>
  </ul>
</div>

v-for을 통해서 items를 모두 돌며 item에 객체를 저장하고 그 값들을 사용한다.
v-for에는 v-bind:key가 필수적으로 사용된다. 여기서는 없어도 실행은 되지만, 실무에서는 오류가 발생할 수 있기 때문에 꼭 고유 값을 설정해주어야 한다. item.id가 여기서 고윳값으로 사용될 수 있다.
item.message를 통해서 각각의 js파일 내의 객체를 출력한다.

 

실행결과