vue.js v-for와 객체구문

v-for와 객체구문

v-for를 사용하여 객체의 속성을 반복할 수도 있습니다.

HTML부분
<ul id="v-for-object" class="demo">
    <li v-for="value in object">
        {{ vlaue }}
    </li>
</ul>

JS부분

new Vue({
    el: "#v-for-object",
    data:{
        object:{
            firstName: "John", 
            lastName: "Doe",
            age:30
        }
    }
})

키에 대한 두번째 전달 인자를 제공할 수도 있습니다.
HTML 부분
<div v-for="(value, key) in object">
    {{key}} : {{value}}
</div>

그리고 또 인덱스도 제공합니다.

HTML 부분
<div v-for="(vlaue, key, index) in object">
    {{index}.{{key}} : {{value}}
</div>

객체를 반복할 때 순서는 Object.keys()의 키 나열순서에 따라 결정됩니다.
이 순서는 javasript엔진 구현간에 일관적이지는 않습니다.

key
Vue가 v-for에서 렌더링된 엘리먼트 목록을 갱신할 때 기본적으로 "in-place patch"전략을
사용합니다. 데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM요소를 이동하는
대신Vue는 각 요소를 적절한 위치에 패치하고 해당 인덱스에서 렌더링할 내용을 반영하는지
확인합니다. 이것은 Vue 1.x의 track-by=$index의 동작과 유사합니다.

이 기본 모드는 효율적이지만 목록의 출력 결과가 하위 컴포넌트 상태 또는 임시 DOM상태(예:폼 input)에
의존하지 않는 경우에 적합합니다.

Vue가 각 노드의 ID를 추적하고 기존 엘리먼트를 재사용하고 재정렬할 수 있도록 힌트를 
제공하려면 각 항목에 고유한 key속성을 제공해야 합니다. 
key에 대한 이상적인 값은 각 항목의 고유한 ID입니다. 
이 특별한 속성은 1.x버전의 track-by와 거의 비슷하지만 속성처럼 작동하기 때문에
v-bind를 사용하여 동적 값에 바인딩 해야합니다.