Vue 8 - v-for 리스트 렌더링

Vue

by chloekim66 2022. 7. 13. 11:47

728x90

data의 people에있는 사람들의 이름과 나이를

하나하나 div로 출력하고 싶을 때 반복문을 쓰지 않는다면

<body>
  <div id="app">
    <div> {{ people[0].name}}  {{ people[0].age}} </div> 
    <div> {{ people[1].name}}  {{ people[1].age}} </div> 
    <div> {{ people[2].name}}  {{ people[2].age}} </div> 
  </div>
  <script>
    new Vue({
      el:'#app',
      data:{
        people: [
          { name : 'a', age: 20 },
          { name : 'b', age: 21 },
          { name : 'c', age: 22 },
        ] 
       },
       methods:{

       }
    })
  </script>
</body>

반복문 사용(key값 필요)

<body>
  <div id="app">
    <div v-for="person in people" :key="person.id">
         {{ person.name}} {{person.age}}
    </div>
  </div>
  <script>
    new Vue({
      el:'#app',
      data:{
        people: [
          { id : 1, name : 'a', age: 20 },
          { id : 2, name : 'b', age: 21 },
          { id : 3, name : 'c', age: 22 },
        ] 
       },
       methods:{

       }
    })
  </script>
</body>

또 person옆에 index를 써주면 이렇게 인덱스도 가져올수 있다.

<body>
  <div id="app">
    <div v-for="(person, index) in people" :key="person.id">
         {{ person.name}} {{person.age}} {{index}}
    </div>
  </div>
  <script>
    new Vue({
      el:'#app',
      data:{
        people: [
          { id : 1, name : 'a', age: 20 },
          { id : 2, name : 'b', age: 21 },
          { id : 3, name : 'c', age: 22 },
        ] 
       },
       methods:{

       }
    })
  </script>
</body>

출력

a 20 0

b 21 1

c 22 2

※ key값으로 index를 사용하지않는 이유

데이터가 추가되거나, 삭제되어 인덱스값이 변하는 경우가 있으므로,

key값으로 사용하지 않는다.

보통은 id가 있으며, 유니크한 값이 정말 없다면 name+ 숫자라던지 합성해서 사용한다.

728x90

저작자표시 비영리 변경금지 (새창열림)

'Vue' 카테고리의 다른 글

Vue 10 - Vue 컴포넌트 (0)	2022.07.13
Vue 9 - 여러개의 Vue 인스턴스 사용하기 (0)	2022.07.13
Vue 7 - v-if 와 v-show (0)	2022.07.13
Vue 6 - 클래스 & 스타일 바인딩 (0)	2022.07.12
Vue 5 - Computed 속성과 Watch속성 (0)	2022.07.12