리스트 렌더링

v-for로 엘리먼트에 배열 매핑하기

 

v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다.
v-for 디렉티브는 item in items형태로 특별한 문법이 필요합니다.

여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭입니다.

#기본사용방법

HTML부분

<ul id="example-1">
    <li v-for="item in items">
        {{item.message}}
    </li>
</ul>

JS부분
var example1 = new Vue({
    el: "#example-1",
    data:{
        item: [
            {message: 'Foo'},
            {message: 'Bar'}
        ]
    }
})

v-for 블록안에는 부모 범위 속성에 대한 모든 권한이 있습니다.
v-for는 또한 현재 항목의 인덱스에 대한 두번째 전달인자 옵션을 제공합니다.

<ul id="example-2">
    <li v-for="(item, index) in items">
        {{parentMessage}} - {{index}} - {{item.message}}
    </li>
</ul>

Js 부분
var example2 = new Vue({
    el: "#example-2",
    data:{
        parentMessage : 'Parent',
        items:[
            {message: 'Foo'},
            {message: 'Bar'}
        ]
    }
})

in 대신에 of를 구분자로 사용할 수 있습니다. 그래서 javascript의 이터레이터에 대한
자바스크립트 구문과 유사합니다.

<div v-for="item of items"></div>