上面的例子用最简单的方式实现了一个增删改查，为了进一步体验我们Vue的神奇，博主更进了一步，用Vue去做了一个客户端分页的表格功能。其实代码量并不大。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="https://www.jb51.net/Content/bootstrap/css/bootstrap.css" /> <style type="text/css"> table thead tr th { text-align: center; } </style> </head> <body> <div> <div> <div>用户管理</div> <table> <thead> <tr> <th>用户名</th> <th>年龄</th> <th>毕业学校</th> <th>备注</th> </tr> </thead> <tbody> <template v-for="(row, index) in rows "> <tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize"> <td>{{row.Name}}</td> <td>{{row.Age}}</td> <td>{{row.School}}</td> <td>{{row.Remark}}</td> </tr> </template> </tbody> </table> </div> <nav> <ul> <template v-for="page in Math.ceil(rows.length/pagesize)"> <li v-on:click="PrePage()" v-if="page==1"><a href="#" >上一页</a></li> <li v-if="page==1" v-on:click="NumPage(page, $event)"><a href="#" >{{page}}</a></li> <li v-else v-on:click="NumPage(page, $event)"><a href="#" >{{page}}</a></li> <li v-on:click="NextPage()" v-if="page==Math.ceil(rows.length/pagesize)"><a href="#" >下一页</a></li> </template> </ul> </nav> </div> <script src="https://www.jb51.net/Content/jquery-1.9.1.min.js"></script> <script src="https://www.jb51.net/Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { rows: [ { Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' }, { Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' }, { Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' }, { Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' }, ], pagesize: 2, curpage:1,//当前页的页码 }; //ViewModel var vue = new Vue({ el: '#app', data: data, methods: { //上一页方法 PrePage: function (event) { $(".pagination .active").prev().trigger("click"); }, //下一页方法 NextPage: function (event) { $(".pagination .active").next().trigger("click"); }, //点击页码的方法 NumPage: function (num, event) { if (this.curpage == num) { return; } this.curpage = num; $(".pagination li").removeClass("active"); if (event.target.tagName.toUpperCase() == "LI") { $(event.target).addClass("active"); } else { $(event.target).parent().addClass("active"); } if (this.curpage == 1) { $("#prepage").addClass("disabled"); } else { $("#prepage").removeClass("disabled"); } if (this.curpage == Math.ceil(this.rows.length / this.pagesize)) { $("#nextpage").addClass("disabled"); } else { $("#nextpage").removeClass("disabled"); } } } }); </script> </body> </html>
来看看效果吧：
什么，数据少了不过瘾？那我们加一点数据试试呗。调整一下data变量，其他不用做任何变化。
var data = { rows: [ { Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' }, { Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' }, { Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' }, { Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' }, { Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' }, { Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' }, { Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' }, { Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' }, { Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' }, { Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' }, { Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' }, { Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' }, { Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' }, { Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' }, { Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' }, { Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' }, ], pagesize: 6, curpage:1,//当前页的页码 };
测试效果：
