基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。
该指令之值，必须使用特定的语法(item, index) in items,  为当前遍历元素提供别名。 v-for的优先级别高于v-if之类的其他指令

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for</title>
    <script src="js/vue.js"></script>
    <style>
        table {
            border: 1px solid orangered;
            text-align: center;
        }

        thead {
            background-color: orangered;
        }

        thead tr th {
            width: 150px;
            color: white;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(p,index) in people">
            <td>{{ index }}</td>
            <td>{{ p.name }}</td>
            <td>{{ p.age }}</td>
            <td>{{ p.gender }}</td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    // 创建Vue的实例
    let app = new Vue({
        el: '#app',
        data: {
            people: [
                {name: 'Apollo', age: 28, gender: 'male'},                {name: 'Jack', age: 22, gender: 'male'},                {name: 'Merry', age: 25, gender: 'female'},                {name: 'John', age: 29, gender: 'male'},            ]        }    })</script></body></html>