通过前面两篇文章的的学习，我们掌握了vue的基本用法. 本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist.
第一步、使用bootstrap做好布局
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="https://www.jb51.net/lib/bootstrap.min.css"/> <script src="https://www.jb51.net/lib/jquery-1.7.2.js"></script> <script src="https://www.jb51.net/lib/bootstrap.js"></script> </head> <body> <div> <form role="form"> <div> <label for="username">用户名:</label> <input type="text" placeholder="输入用户名"> </div> <div> <label for="age">年 龄:</label> <input type="text" placeholder="输入年龄"> </div> <div> <input type="button" value="添加"> <input type="button" value="重置"> </div> </form> <hr> <table> <caption>用户信息表</caption> <tr> <th>序号</th> <th>名字</th> <th>年龄</th> <th>操作</th> </tr> <tr> <td>1</td> <td>张三</td> <td>20</td> <td> <button>删除</button> </td> </tr> <tr> <td>2</td> <td>李四</td> <td>22</td> <td> <button>删除</button> </td> </tr> <tr> <td colspan="4"> <button>删除全部</button> </td> </tr> <tr> <td colspan="4"> <p>暂无数据....</p> </td> </tr> </table> </div> </body> </html>
第二步、增加模态框，模态框默认为隐藏的
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="https://www.jb51.net/lib/bootstrap.min.css"/> <script src="https://www.jb51.net/lib/jquery-1.7.2.js"></script> <script src="https://www.jb51.net/lib/bootstrap.js"></script> </head> <body> <div> <form role="form"> <div> <label for="username">用户名:</label> <input type="text" placeholder="输入用户名"> </div> <div> <label for="age">年 龄:</label> <input type="text" placeholder="输入年龄"> </div> <div> <input type="button" value="添加"> <input type="button" value="重置"> </div> </form> <hr> <table> <caption>用户信息表</caption> <tr> <th>序号</th> <th>名字</th> <th>年龄</th> <th>操作</th> </tr> <tr> <td>1</td> <td>张三</td> <td>20</td> <td> <button data-toggle="modal" data-target="#layer">删除</button> </td> </tr> <tr> <td>2</td> <td>李四</td> <td>22</td> <td> <button data-toggle="modal" data-target="#layer">删除</button> </td> </tr> <tr> <td colspan="4"> <button>删除全部</button> </td> </tr> <tr> <td colspan="4"> <p>暂无数据....</p> </td> </tr> </table> <!--模态框 弹出框--> <div role="dialog"> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>×</span> </button> <h4>确认删除么?</h4> </div> <div> <button data-dismiss="modal">取消</button> <button data-dismiss="modal">确认</button> </div> </div> </div> </div> </div> </body> </html>
第三步、定义userList用来保存用户，userName保存用户名, age保存用户变量， 然后把userName和age 通过 v-model指令绑定到对应的输入框，实现输入框与变量中的数据双向驱动，在表格的行中输出userList
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="https://www.jb51.net/lib/bootstrap.min.css"/> <script src="https://www.jb51.net/lib/jquery-1.7.2.js"></script> <script src="https://www.jb51.net/lib/bootstrap.js"></script> <script src="https://www.jb51.net/js/vue.js"></script> <script> window.onload = function () { var c = new Vue({ el: '#box', data: { userList: [], userName : '', age : '' } }); } </script> </head> <body> <div> <form role="form"> <div> <label for="username">用户名:</label> <input type="text" v-model="userName" placeholder="输入用户名"> </div> <div> <label for="age">年 龄:</label> <input type="text" v-model="age" placeholder="输入年龄"> </div> <div> <input type="button" value="添加"> <input type="button" value="重置"> </div> </form> <hr> <table> <caption>用户信息表</caption> <tr> <th>序号</th> <th>名字</th> <th>年龄</th> <th>操作</th> </tr> <tr v-for="value in userList"> <td>{{$index+1}}</td> <td>{{value.name}}</td> <td>{{value.age}}</td> <td> <button data-toggle="modal" data-target="#layer">删除</button> </td> </tr> <tr> <td colspan="4"> <button>删除全部</button> </td> </tr> <tr> <td colspan="4"> <p>暂无数据....</p> </td> </tr> </table> <!--模态框 弹出框--> <div role="dialog"> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>×</span> </button> <h4>确认删除么?</h4> </div> <div> <button data-dismiss="modal">取消</button> <button data-dismiss="modal">确认</button> </div> </div> </div> </div> </div> </body> </html>