Vue基本指令 v-for

前端页面的作用是将内容展现给用户，但是如果数据量太多的情况我们也要一条一条的编辑就显得太麻烦，甚至有些不太现实，比如一些电商网站、数据统计等，他们的数据量是相当庞大的，我们不可能一条一条的去编写，所以有了 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>

• item：数组中的元素
• index：数组中元素的索引

在循环遍历对象时，推荐使用 for...in，它的语法格式为

<ul>
    <li v-for="(item, key, index) of object"></li>
</ul>

• item：对象中的键值
• key：对象中的键名
• index：对象中属性的索引

例：

<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",
        },
    ]
}