Vue.js
렌더링 목록
수색…
기본 사용법
목록은 v-for
지정. v-for
사용하여 표현할 수 있습니다. 구문을 사용하려면 반복 할 원본 배열과 반복되는 각 항목을 참조하는 데 사용되는 별칭을 지정해야합니다. 다음 예제에서는 items
을 소스 배열로 사용하고 item
을 각 항목의 별칭으로 사용합니다.
HTML
<div id="app">
<h1>My List</h1>
<table>
<tr v-for="item in items">
<td>{{item}}</td>
</tr>
</table>
</div>
스크립트
new Vue({
el: '#app',
data: {
items: ['item 1', 'item 2', 'item 3']
}
})
여기서 데모를 볼 수 있습니다.
HTML 항목 만 렌더링
이 예제에서는 다섯 개의 <li>
태그를 렌더링합니다.
<ul id="render-sample">
<li v-for="n in 5">
Hello Loop
</li>
</ul>
돼지 카운트 다운 목록
<ul>
<li v-for="n in 10">{{11 - n}} pigs are tanning at the beach. One got fried, and
</ul>
https://jsfiddle.net/gurghet/3jeyka22/
객체에 대한 반복
v-for
는 객체 키 (및 값)를 반복하는 데 사용할 수 있습니다.
HTML :
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
스크립트:
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow