## 列表渲染 ~~~ <div id="app"> <h1>圖書管理系統</h1> <table> <thead> <tr> <th>書名</th> <th>作者</th> <th>價格</th> <th>標簽</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="book in books"> <td>{{ book.name }}</td> <td>{{ book.author }}</td> <td>{{ book.price }}</td> <td>{{ book.tag }}</td> <td><button>刪除</button></td> </tr> </tbody> </table> </body> <script> var vm = new Vue({ el: '#app', data: { books:[ {id:1,name:'《三國演義》',author:'羅貫中',price:'99.99',tag:'經典'}, {id:2,name:'《紅樓夢》',author:'曹雪芹',price:'88',tag:'推薦'}, {id:3,name:'《水滸傳》',author:'施耐庵',price:'77',tag:'熱銷'}, {id:4,name:'《西游記》',author:'吳承恩',price:'60',tag:'經典'} ], } }) </script> ~~~