![](https://img2020.cnblogs.com/blog/1030087/202103/1030087-20210310140940520-886298324.png)
![](https://img2020.cnblogs.com/blog/1030087/202103/1030087-20210310145549530-1800784971.png)
<div id="goodSpirit">
<ul>
<li v-for="item,index in items" :key="index">
{{index}} -- {{item.message}}
</li>
</ul>
<ul>
<li v-for="value,key in object">
{{key}} : {{value}}
</li>
</ul>
<ul>
<li v-for="one,index in friends" :key="index">
{{index}} -- {{one.name}}
</li>
</ul>
</div>
<p>为了防止每次都使用相同的id引起混淆,这里改用goodSpirit作为div的id</p>
var vm = new Vue({
el:"#goodSpirit",
data:{
//数组
items:[
{message:'Foo'},
{message:'Bar'}
],
//对象
object:{
title:'How to do lists in Vue~',
author:'ukyo',
publishedAt:'2021-03-10'
},
//my friends:
friends:[
{name:'段能鑫'},
{name:'大山'},
{name:'李丹'},
{name:'聂飞'}
]
}
});