v-for指令可以绑定数组的数据来渲染一个项目列表
    v-for指令需要使用item in items形式的特殊语法，
    items是源数据数组并且item是数组元素迭代的别名

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    7. </head>
    8. <body>
    9. <div id="app">
    10.     <span>{{message}}</span>
    11.     <hr>
    12.     <ul>
    13.         <li v-for="(item,index) in items">{{index+1}} {{item}}</li>
    14.     </ul>
    15.     <ul>
    16.         <li v-for="(value, key) in object">{{key}} {{value}}</li>
    17.     </ul>
    18.     <ul>
    19.         <li v-for="todo in todos">{{todo.title}}----{{todo.author}}</li>
    20.     </ul>
    21. </div>
    22. </body>
    23. <script>
    24.     var vm = new Vue({
    25.         el: "#app",
    26.         data: {
    27.             message: "hello",
    28.             items: ["python", "go", "rust"],
    29.             object: {
    30.                 title: "How to do lists in Vue",
    31.                 author: "Jane Doe",
    32.                 publisedAt: "2019-04-01",
    33.             },
    34.             todos: [
    35.                 {
    36.                     title: "Vue",
    37.                     author: "Jane Doe",
    38.                     publisedAt: "2019-04-01",
    39.                 },
    40.                 {
    41.                     title: "Python",
    42.                     author: "Guido",
    43.                     publisedAt: "1990-04-01",
    44.                 },
    45.             ]
    46.         }
    47.     })
    48. </script>
    49. </html>

    image.png