一、 v-for指令
1、用于展示列表数据；
2、语法：v-for="(item,index) in xxx" :key="yyy"；
3、可遍历：数组，对象，字符串（用的很少）、指定次数（用的很少）
二、可遍历对象示例
<html>
<head>
<title>基本列表</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 1、遍历数组 -->
<h2>人员列表</h2>
<ul>
<!-- <li v-for="p in persons" :key="p.id"> -->
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 2、遍历对象 -->
<h2>汽车信息</h2>
<ul>
<!-- <li v-for="(a,b) in car">{{a}}----{{b}}---</li> -->
<!--
结果为：
奥迪A3----name---
120万----price---
白色----color---
-->
<li v-for="(value,key) in car" :key="key">{{key}}----{{value}}--</li>
<!--
结果为：
name----奥迪A3--
price----120万--
color----白色--
-->
</ul>
<!-- 3、遍历字符串（用的少）-->
<h2>测试遍历字符串</h2>
<ul>
<li v-for="(char,index) of str">{{char}}----{{index}}</li>
<!--
结果为：
h----0
e----1
l----2
l----3
o----4
-->
</ul>
<!-- 4、遍历指定次数（用的少） -->
<h2>遍历指定次数</h2>
<ul>
<li v-for="(a,b) in 5">{{a}}--{{b}}</li>
<!--
结果为：
1--0
2--1
3--2
4--3
5--4
-->
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const v =new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:'12'},
{id:'002',name:'李四',age:'24'},
{id:'003',name:'王五',age:'33'}
],
car:{
name:'奥迪A3',
price:'120万',
color:'白色'
},
str:'hello'
}
})
</script>
</body>
</html>