미소의 세상

Vue v-for 간단예제 본문

Web

Vue v-for 간단예제

짱미소 2022. 4. 6. 16:29
 

리스트 렌더링 — 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' 카테고리의 다른 글

lodash 소개  (1) 2022.10.06
레디스(redis)란?  (0) 2022.05.11
jqgrid autowidth로 가로 꽉차게 안될때  (0) 2022.03.30
Xml, Json, Yaml 차이  (0) 2022.03.14
Web 이동방식 foward vs redirect 차이  (0) 2022.03.11
'Web' Related Articles more
Comments