通過前面兩篇文章的的學習，我們掌握了vue的基本用法. 本文，就利用這些基礎知識來實現一個留言板， 老外把他稱之為todolist.
第一步、使用bootstrap做好布局
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="lib/jquery-1.7.2.js"></script> <script src="lib/bootstrap.js"></script></head><body><div class="container"> <form role="form"> <div class="form-group"> <label for="username">用戶名:</label> <input type="text" id="username" class="form-control" placeholder="輸入用戶名"> </div> <div class="form-group"> <label for="age">年 齡:</label> <input type="text" id="age" class="form-control" placeholder="輸入年齡"> </div> <div class="form-group"> <input type="button" value="添加" class="btn btn-primary"> <input type="button" value="重置" class="btn btn-danger"> </div> </form> <hr> <table class="table table-bordered table-hover"> <caption class="h2 text-info">用戶信息表</caption> <tr class="text-danger"> <th class="text-center">序號</th> <th class="text-center">名字</th> <th class="text-center">年齡</th> <th class="text-center">操作</th> </tr> <tr class="text-center"> <td>1</td> <td>張三</td> <td>20</td> <td> <button class="btn btn-primary btn-sm">刪除</button> </td> </tr> <tr class="text-center"> <td>2</td> <td>李四</td> <td>22</td> <td> <button class="btn btn-primary btn-sm">刪除</button> </td> </tr> <tr> <td colspan="4" class="text-right"> <button class="btn btn-danger btn-sm">刪除全部</button> </td> </tr> <tr> <td colspan="4" class="text-center text-muted"> <p>暫無數據....</p> </td> </tr> </table></div></body></html>
第二步、增加模態框，模態框默認為隱藏的
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="lib/jquery-1.7.2.js"></script> <script src="lib/bootstrap.js"></script></head><body><div class="container"> <form role="form"> <div class="form-group"> <label for="username">用戶名:</label> <input type="text" id="username" class="form-control" placeholder="輸入用戶名"> </div> <div class="form-group"> <label for="age">年 齡:</label> <input type="text" id="age" class="form-control" placeholder="輸入年齡"> </div> <div class="form-group"> <input type="button" value="添加" class="btn btn-primary"> <input type="button" value="重置" class="btn btn-danger"> </div> </form> <hr> <table class="table table-bordered table-hover"> <caption class="h2 text-info">用戶信息表</caption> <tr class="text-danger"> <th class="text-center">序號</th> <th class="text-center">名字</th> <th class="text-center">年齡</th> <th class="text-center">操作</th> </tr> <tr class="text-center"> <td>1</td> <td>張三</td> <td>20</td> <td> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">刪除</button> </td> </tr> <tr class="text-center"> <td>2</td> <td>李四</td> <td>22</td> <td> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">刪除</button> </td> </tr> <tr> <td colspan="4" class="text-right"> <button class="btn btn-danger btn-sm">刪除全部</button> </td> </tr> <tr> <td colspan="4" class="text-center text-muted"> <p>暫無數據....</p> </td> </tr> </table> <!--模態框 彈出框--> <div role="dialog" class="modal fade bs-example-modal-sm" id="layer"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button> <h4 class="modal-title">確認刪除么?</h4> </div> <div class="modal-body text-right"> <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button> <button data-dismiss="modal" class="btn btn-danger btn-sm">確認</button> </div> </div> </div> </div></div></body></html>
新聞熱點
疑難解答
圖片精選
