할머니의 콤퓨타 도전기

[Vue.js] v-for 리스트 렌더링 본문

Web Front-end/Vue.js

[Vue.js] v-for 리스트 렌더링

ji.o.n.e 2020. 10. 28. 11:56
 

리스트 렌더링 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

 

  • 코드 구현
    • v-for의 두번째 인자는 index이다.
    • Vue에서 개별 DOM 노드들을 추적하고 기존 엘리먼트를 재사용, 재정렬하기 위해서 v-for의 각 항목들에 고유한 key 속성을 제공해야 함.
    • 그러나 key 속성을 index로 주는 것은 올바르지 않다.
    • key는 고유한 값을 가져야하는데 index로 key를 지정할 경우 리스트 원소의 삭제나 추가 있을 경우에 값이 바뀌게 된다.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Study</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<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>
        <hr>
        <div v-for="(person,index) in people" :key="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 },
                    { id: 4, name: 'd', age: 23 }
                ]
            },
        })
    </script>
</body>

</html>

 

  • 실행 화면

저작자표시

'Web Front-end > Vue.js' 카테고리의 다른 글

[Vue.js] Vue 컴포넌트 (Component)  (0) 2020.10.28
[Vue.js] 여러개의 Vue 인스턴스 사용하기  (0) 2020.10.28
[Vue.js] v-if 와 v-show  (0) 2020.10.28
[Vue.js] Watch 속성  (0) 2020.10.28
[Vue.js] Computed 속성  (0) 2020.10.28
'Web Front-end/Vue.js' Related Articles more
Comments