VueJs List Rendering
Examples
Basic Usage
A list can be rendered using the v-for directive. The syntax requires that you specify the source array to iterate on, and an alias that will be used to reference each item in the iteration. In the following example we use items as the source array, and item as the alias for each item.
HTML
<div id="app">
<h1>My List</h1>
<table>
<tr v-for="item in items">
<td>{{item}}</td>
</tr>
</table>
</div>Script
new Vue({
el: '#app',
data: {
items: ['item 1', 'item 2', 'item 3']
}
})Only render HTML items
In this example will render five
<li><ul id="render-sample">
<li v-for="n in 5">
Hello Loop
</li>
</ul>Pig countdown list
<ul>
<li v-for="n in 10">{{11 - n}} pigs are tanning at the beach. One got fried, and
</ul>Iteration over an object
v-for can be used for iterating over an object keys (and values):
HTML:
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>Script:
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})