<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div>一共有书:{{bookList.length}}本</div><div v-for="book in bookList"> 书的ID:{{book.id}},书名:{{book.name}}</div> </div> <script> new Vue({ el: ' #app ', data:{ bookList:[] }, mounted(){ axios.get( "http://127.0.0.1:8080/getBooks" ) .then( response=>{ let responseData = response.data; this.bookList =responseData; }) } }) </script> </body> </html>
时间: 2023-05-11 20:04:01 浏览: 92
-doctype-html-html-lang-en-dir-ltr-head-meta-name:
这是一个HTML文件,使用了Vue.js和axios库。其中定义了一个id为"app"的div元素,用于展示书籍列表。通过Vue.js的v-for指令,将bookList数组中的每个元素渲染为一个div元素,显示书籍的ID和名称。最终页面上会显示书籍总数和每本书的ID和名称。
阅读全文