Vue.js 리스트 렌더링 정보
기타 Vue.js 리스트 렌더링본문
리스트 렌더링
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>
0
댓글 0개