20181126——Vue小例項v-for的使用
阿新 • • 發佈：2018-11-28
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> #table{ line-height: 40px; text-align: center; margin: 0 auto; } </style> </head> <body> <div id="app"> <div id="table"> <table border="1"> <tr> <th>序號</th> <th>書名</th> <th>作者</th> <th>價格</th> <th>操作</th> </tr> <tr v-for="item in dataList" :key="item.id"> <td>{{item.index}}</td> <td>{{item.bookName}}</td> <td>{{item.author}}</td> <td>{{item.price}}</td> <td>{{item.active}}</td> </tr> </table> </div> </div> <script> var vm =new Vue({ el:"#app", data (){ return{ dataList:[{ id:'0001', index:1, bookName:"紅樓夢", author:"曹雪芹", price:32, active:"刪除" }, { id:'0002', index:2, bookName:"水滸傳", author:"施耐庵", price:30, active:"刪除" }, { id:'0003', index:3, bookName:"三國演義", author:"羅貫中", price:32, active:"刪除" }, { id:'0004', index:4, bookName:"西遊記", author:"吳承恩", price:32, active:"刪除" }] } } }) </script> </body> </html>
隨便複習一下html中的表格，table th tr td 標籤
讓表格居中，只需要在table標籤中定義align屬性為center就可以了