通过前面两篇文章的的学习,我们掌握了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>
第三步、定义userList用来保存用户,userName保存用户名, age保存用户变量, 然后把userName和age 通过 v-model指令绑定到对应的输入框,实现输入框与变量中的数据双向驱动,在表格的行中输出userList
<!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> <script src="../js/vue.js"></script> <script> window.onload = function () { var c = new Vue({ el: '#box', data: { userList: [], userName : '', age : '' } }); } </script> </head> <body> <div class="container" id="box"> <form role="form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名"> </div> <div class="form-group"> <label for="age">年 龄:</label> <input type="text" id="age" v-model="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" v-for="value in userList"> <td>{{$index+1}}</td> <td>{{value.name}}</td> <td>{{value.age}}</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>
第四步、添加用户,点击添加按钮,把输入框中的数据作为一个对象 push 到数组userList,添加完之后,把userName, age清空,那么两个输入框的内容就会被清空
<!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> <script src="../js/vue.js"></script> <script> window.onload = function () { var c = new Vue({ el: '#box', data: { userList: [], userName : '', age : '' } }); } </script> </head> <body> <div class="container" id="box"> <form role="form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名"> </div> <div class="form-group"> <label for="age">年 龄:</label> <input type="text" id="age" v-model="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" v-for="value in userList"> <td>{{$index+1}}</td> <td>{{value.name}}</td> <td>{{value.age}}</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>
第五步、结合数组的长度与v-show指令,实现提示信息的显示与隐藏
<!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> <script src="../js/vue.js"></script> <script> window.onload = function () { var c = new Vue({ el: '#box', data: { userList: [], userName : '', age : '' }, methods : { addUser : function(){ this.userList.push({ name : this.userName, age : this.age }); this.userName = ''; //添加完用户之后,把输入框的值清除 this.age = ''; } } }); } </script> </head> <body> <div class="container" id="box"> <form role="form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名"> </div> <div class="form-group"> <label for="age">年 龄:</label> <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄"> </div> <div class="form-group"> <input type="button" v-on:click="addUser();" 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" v-for="value in userList"> <td>{{$index+1}}</td> <td>{{value.name}}</td> <td>{{value.age}}</td> <td> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button> </td> </tr> <tr v-show="userList.length!=0"> <td colspan="4" class="text-right"> <button class="btn btn-danger btn-sm">删除全部</button> </td> </tr> <tr v-show="userList.length==0"> <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>
第六步、实现删除某行数据
<!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> <script src="../js/vue.js"></script> <script> window.onload = function () { var c = new Vue({ el: '#box', data: { userList: [], userName : '', age : '', curIndex : -10 }, methods : { addUser : function(){ this.userList.push({ name : this.userName, age : this.age }); this.userName = ''; //添加完用户之后,把输入框的值清除 this.age = ''; }, deleteRow : function( n ){ this.userList.splice( n, 1 ); } } }); } </script> </head> <body> <div class="container" id="box"> <form role="form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名"> </div> <div class="form-group"> <label for="age">年 龄:</label> <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄"> </div> <div class="form-group"> <input type="button" v-on:click="addUser();" 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" v-for="value in userList"> <td>{{$index+1}}</td> <td>{{value.name}}</td> <td>{{value.age}}</td> <td> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="curIndex=$index">删除</button> </td> </tr> <tr v-show="userList.length!=0"> <td colspan="4" class="text-right"> <button class="btn btn-danger btn-sm">删除全部</button> </td> </tr> <tr v-show="userList.length==0"> <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" v-on:click="deleteRow(curIndex);">确认</button> </div> </div> </div> </div> </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> <script src="../js/vue.js"></script> <script> window.onload = function () { var c = new Vue({ el: '#box', data: { userList: [], userName: '', age: '', curIndex: -10 }, methods: { addUser: function () { this.userList.push({ name: this.userName, age: this.age }); this.userName = ''; //添加完用户之后,把输入框的值清除 this.age = ''; }, deleteRow: function (n) { if (n == -1) { //当n=-1的时候,清空数组,就是删除全部 this.userList = []; } else { this.userList.splice(n, 1); } } } }); } </script> </head> <body> <div class="container" id="box"> <form role="form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名"> </div> <div class="form-group"> <label for="age">年 龄:</label> <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄"> </div> <div class="form-group"> <input type="button" v-on:click="addUser();" 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" v-for="value in userList"> <td>{{$index+1}}</td> <td>{{value.name}}</td> <td>{{value.age}}</td> <td> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="curIndex=$index">删除 </button> </td> </tr> <tr v-show="userList.length!=0"> <td colspan="4" class="text-right"> <button class="btn btn-danger btn-sm" v-on:click="curIndex=-1" data-toggle="modal" data-target="#layer"> 删除全部 </button> </td> </tr> <tr v-show="userList.length==0"> <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" v-on:click="deleteRow(curIndex);">确认 </button> </div> </div> </div> </div> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。