基本列表
Vue 引入 v-for 来遍历列表，列表里的数据可以是数组、对象、字符串和次数；
v-for 指令
1）用于展示列表数据；
2）语法： v-for="(item,index) in items" :key="key"， in 换用 of 也是可以的；
3）可遍历：数组、对象、字符串(用的少)、指定次数(用的少)
遍历数组
需求：遍历数组，将内容显示在列表中；
<div id="root">
<h2>{{title}}信息</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
</div>
提示1：引入 v-for 遍历数据，类似JS中 for...in 用法，(p,index) 理解为形参，persons 为遍历对象；
提示2：:key 是Vue里的特殊属性，用于虚拟DOM的算法，目前理解需要值唯一就可以；
new Vue({
el:'#root',
data:{
title:'人员',
persons:[
{id:"001",name:"张三",age:18},
{id:"002",name:"李四",age:19},
{id:"003",name:"王五",age:20},
{id:"004",name:"赵六",age:21}
]
}
});
提示：persons 为数组，数组里又以对象的形式存储着人员信息，使用 id 一般是后台传来的数据，区别唯一性；
看效果：
遍历对象
需求：遍历对象，将内容显示在列表中；
<div id="root">
<h2>{{title}}信息</h2>
<ul>
<li v-for="(val,key) in car" :key="key">
{{key}}-{{val}}
</li>
</ul>
</div>
提示：遍历对象时的 key , val 顺序要注意一下；
new Vue({
el: '#root',
data: {
title: '汽车',
car: {
brand: 'BMW',
price: '28W',
color: 'blank',
weight: '5ton'
}
}
});
提示：以一个对象的形式存储的数据；
看下效果：
遍历字符串
需求：遍历字符串，将内容显示在列表中；
<div id="root">
<h2>{{title}}信息</h2>
<ul>
<li v-for="(char,index) in str" :key="index">
{{char}}-{{index}}
</li>
</ul>
</div>
提示：这次是字符串，注意 char 和 index , 其中 index 是指字符串的位置，从 0 开始读数；
new Vue({
el: '#root',
data: {
title: '字符串',
str:'hello'
}
});
遍历字符串，用的不多；
看下效果：
遍历次数
需求：遍历次数，将内容显示在列表中；
<div id="root">
<h2>{{title}}信息</h2>
<ul>
<li v-for="(number,index) in 5" :key="index">
{{number}}-{{index}}
</li>
</ul>
</div>
提示：这次只是遍历次数，直接 in 5，输出是数字和索引；
new Vue({
el: '#root',
data: {
title: '次数',
}
});
看下效果：
