Vue列表渲染 #tags: Vue
<ul id="example-1">
<li v-for="item in items"><!-- in 可以用 of 替换 -->
{{ item.message }}
</li>
</ul>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{message: 'Foo' },
{message: 'Bar' }
]
}
})
</script>
对象迭代:
<ul id="repeat-object" class="demo">
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
<script>
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
</script>
整数迭代:
<span v-for="n in 10">{{ n }}</span>
<!-- 输出 1..10 -->
用 for 提供 key
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>