列表循环v-for（最基础的数组）
<body>
<div id="app">
<ul>
<li v-for="item in stars">
{{item}}
</li>
</ul>
</div>
<script type="text/javascript" >
var app=new Vue({
el:"#app",
data:{
stars:["蔡徐坤","吴亦凡","黄子韬","鹿晗"]
}
})
</script>
</body>
列表循环v-for（对象）
<body>
<div id="app">
<ul>
<li v-for="item,key in students">
<h4>索引值：{{key}}---{{item.studentName}}</h4>
<p>年龄：{{item.age}}-----学校：{{item.school}}</p>
</li>
</ul>
</div>
<script type="text/javascript" >
var app=new Vue({
el:"#app",
data:{
students:[
{
studentName:"小明",
age:16,
school:"清华"
},
{
studentName:"小红",
age:17,
school:"北大"
},
{
studentName:"小华",
age:18,
school:"浙大"
}
]
}
})
</script>
</body>
列表循环v-for（对象内循环）
<body>
<div id="app"> <ul> <li v-for="item,key in students[0]"> key:{{key}}---value:{{item}} </li> </ul> </div> <script type="text/javascript" > var app=new Vue({ el:"#app", data:{ students:[ { studentName:"小明", age:16, school:"清华" }, { studentName:"小红", age:17, school:"北大" }, { studentName:"小华", age:18, school:"浙大" } ] } }) </script> </body>
列表+条件循环（找出年龄为偶数的学生）
<body>
<div id="app">
<ul>
<li v-for="item,key in students" v-if="item.age%2==0">
<h4>索引值：{{key}}---{{item.studentName}}</h4>
<p>年龄：{{item.age}}-----学校：{{item.school}}</p>
</li>
</ul>
</div>
<script type="text/javascript" >
var app=new Vue({
el:"#app",
data:{
students:[
{
studentName:"小明",
age:16,
school:"清华"
},
{
studentName:"小红",
age:17,
school:"北大"
},
{
studentName:"小华",
age:18,
school:"浙大"
}
]
}
})
</script>
</body>
原文：https://www.cnblogs.com/by-young/p/12906703.html