vue学习8-for循环

<!DOCTYPE html>

<html lang='en'>

<head>

 <meta charset='UTF-8'>

 <meta http-equiv='X-UA-Compatible' content='IE=edge'>

 <meta name='viewport' content='width=device-width, initial-scale=1.0'>

 <script src='https://unpkg.com/vue/dist/vue.js'></script>

 <title></title>

</head>

<body>

 <div id='app'>

   <table>

      <thead>

        <tr>

          <th>序号</th>

          <th>书名</th>

          <th>作者</th>  

        </tr>

      </thead>

      <tbody>

        <tr v-for="(book,index) in books">

          <th>{{index+1}}</th>

          <td>{{book.title}}</td>

          <td>{{book.author}}</td>

        </tr>

      </tbody>

   </table>

   

   <div v-for="(value,key) in books">

     {{key}}:{{value}}

   </div>

 </div>

 <script>

    new Vue({

      el:'#app',

      data:{

        books:[{

          'title':"三国演义",

          'author':"罗贯中",

        },

        {

          'title':"水浒传",

          'author':"施耐庵",

        },

        {

          'title':"红楼梦",

          'author':"曹雪芹",

        },

        {

          'title':"西游记",

          'author':"吴承恩",

        },

        ]

}

    }

)

</script>

</body>

</html>