1、vue遍历数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表渲染</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root"><ul><h2>人员列表</h2><li v-for="person in persons" :key="person.id">{{person.id}}-{{person.name}}-{{person.age}}</li></ul>
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{persons:[{id:1,name:'张三',age:18},{id:2,name:'李四',age:19},{id:3,name:'王五',age:20},],},})
</script>
</body>
</html>
也可以这样写
<li v-for="(p,index) in persons" :key="index">{{p.id}}-{{p.name}}-{{p.age}}
</li>
2、遍历对象
<li v-for="(value,key) in car" :key="key">{{key}}-{{value}}</li>