Vue之图书管理案例

• 实现静态列表效果
• 基于数据实现模板效果
• 处理每行的操作按钮

 

静态列表的效果：

 

 

 html结构：

 1   <div id="app">
 2         <div class="grid">
 3             <table>
 4                 <thead>
 5                     <tr>
 6                         <th> 编号</th>
 7                         <th>名称</th>
 8                         <th>时间</th>
 9                         <th>操作</th>
10                     </tr>
11 
12                 </thead>
13                 <tbody>
14                     <tr>
15                         <td>1</td>
16                         <td>javascript</td>
17                         <td>2020-03-10</td>
18                         <td>删除</td>
19                     </tr>
20                     <tr>
21                         <td>2</td>
22                         <td>javascript</td>
23                         <td>2020-03-10</td>
24                         <td>删除</td>
25                     </tr>
26                 </tbody>
27             </table>
28 
29 
30 
31         </div>
32     </div>

静态页面结构