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、遍历对象文章来源：https://www.toymoban.com/news/detail-811646.html
<li v-for="(value,key) in car" :key="key">
{{key}}-{{value}}
</li>
文章来源地址https://www.toymoban.com/news/detail-811646.html
到了这里，关于Vue-16、Vue列表渲染（v-for的使用）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[vue]v-for循环出的列表如何实现每一项单独展开收起](https://imgs.yssmx.com/Uploads/2024/02/532088-1.png)
