前端页面的作用是将内容展现给用户，但是如果数据量太多的情况我们也要一条一条的编辑就显得太麻烦，甚至有些不太现实，比如一些电商网站、数据统计等，他们的数据量是相当庞大的，我们不可能一条一条的去编写，所以有了 v-for 循环遍历
v-for 语句在使用时会直接写在标签当中
<ul> <li v-for="">hello world</li> </ul>
使用 v-for 语句循环遍历的数据格式，有两个方法 for...of 和 for...in
在循环遍历数组时，推荐使用 for...of，它的语法格式为
<ul> <li v-for="(item, index) of array"></li> </ul>
在循环遍历对象时，推荐使用 for...in，它的语法格式为
<ul> <li v-for="(item, key, index) of object"></li> </ul>
例：
<table border="1"> <thead> <tr> <th v-for="item of headArr">{{item}}</th> </tr> </thead> <tbody> <tr v-for="item of bodyArr"> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </tbody> </table>
{ headArr: ["姓名", "年龄"], bodyArr: [ { name: "张三", age: "20", }, { name: "李四", age: "21", }, { name: "王五", age: "22", }, ] }
原文：https://www.cnblogs.com/Function-cnblogs/p/14745580.html