<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
</head>
<body>
<!--1.数组迭代-->
<div id="example1">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<!--第二个参数为索引-->
<ul>
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
</div>
<!--2.对象迭代-->
<div id="example2">
<!--第一个参数为属性值-->
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
<!--第二个参数为键名-->
<ul>
<li v-for="(value, key) in object">
{{ key }}: {{ value }}
</li>
</ul>
<!--第三个参数为索引-->
<ul>
<li v-for="(value, key, index) in object">
{{ index }}.{{ key }}: {{ value }}
</li>
</ul>
</div>
<!--3.在使用 v-for 时提供 key-->
<!--2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的-->
<div id="example3">
<ul>
<li v-for="item in items" :key="item.id">
{{ item.message }}
</li>
</ul>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script>
let vm1 = new Vue({
el: '#example1',
data: {
parentMessage: 'Parent',
items: [
{message: 'Foo'},
{message: 'Bar'}
]
}
});
let vm2 = new Vue({
el: '#example2',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
});
let vm3 = new Vue({
el: '#example3',
data: {
items: [
{
id: 1,
message: 'Foo'
},
{
id: 2,
message: 'Bar'
}
]
}
})
</script>
</body>
</html>
