通过前面两篇文章的的学习，我们掌握了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>
新闻热点
疑难解答
图片精选
