Vue.js
レンダリングのリスト
サーチ…
基本的な使用法
リストは、 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項目のみレンダリングする
この例では、5つの<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