## 列表渲染 ~~~ <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> ~~~ ![](https://box.kancloud.cn/ba4f4f53745c82ad5e1f4c4b554b0209_650x230.png)