<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="../js/vue.js"></script>
<title>基本列表</title>
</head>
<body>
<div id="root">
<!-- 遍历数组 -->
<!-- <h2>人员列表</h2>
<ul> -->
<!-- <li v-for="p in persons" :key="p.id">
{{p.name}}- {{p.age}}
</li> -->
<!-- <li v-for="(p,index) in persons" :key="p.id">
{{p.name}}- {{p.age}}
</li> -->
<!-- <li></li>
<li></li> -->
<!-- </ul> -->
<!-- 遍历对象 -->
<h2>汽车信息</h2>
<ul>
<!-- <li v-for="p in persons" :key="p.id">
{{p.name}}- {{p.age}}
</li> -->
<li v-for="(value,key) in car" :key="key">
{{key}}--{{value}}
</li>
<!-- <li></li>
<li></li> -->
</ul>
</div>
<script>
const vm=new Vue({
el:"#root",
data:{
persons:[
{id:"001",name:"张三",age:18},
{id: "002", name: "李四", age: 19},
{id:"003",name:"王五",age:20},
],
car:{
names:"A8",
color:"white",
price:"330000"
}
}
})
</script>
</body>
</html>
