作用：循环列表

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>v-on事件绑定</title>
    9.     <style>
    10.         .box {
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: red;
    14.         }
    16.         .active {
    17.             background-color: green;
    18.         }
    19.     </style>
    20. </head>
    22. <body>
    23.     <div id='app'>
    24.         <div>
    25.             <ul>
    26.                 <li v-for = '(item,index) in menus' :key = 'item.id'>
    27.                     <h3>{{index}} - id:{{item.id}} 菜名:{{item.name}}</h3>
    28.                 </li>
    29.             </ul>
    30.             <ol>
    31.                 <li v-for = "(val,key) in obj" :key='key'>
    32.                     {{key}}---{{val}}
    33.                 </li>
    34.             </ol>
    35.         </div>
    36.     </div>
    37.     <script src="./vue.js"></script>
    38.     <script>
    39.         new Vue({
    40.             el: '#app',
    41.             data: {
    42.                 menus:[
    43.                     {id:1,name:'大腰子'},
    44.                     {id:2,name:'烤鸡翅'},
    45.                     {id:3,name:'烤韭菜'},
    46.                     {id:4,name:'烤大蒜'},
    47.                 ],
    48.                 obj:{
    49.                     title:'hello 循环',
    50.                     author:'ecithy'
    51.                 }
    52.             },
    53.             methods: {
    54.             },
    55.         })
    56.     </script>
    57. </body>
    59. </html>