第二种使用vue实现分页功能的方法。
首先,data数据定义:
var vm = new Vue({ el: '#app', data: { listArray:[ { 'name':'赵*', 'age':'21', 'edu':'本科', 'phone':'188****888888', 'school':'河南农业大学' }, { 'name':'钱*', 'age':'22', 'edu':'本科', 'phone':'188****888888', 'school':'郑州大学' }, { 'name':'王*', 'age':'23', 'edu':'大专', 'phone':'188****888888', 'school':'河南工业大学' }, { 'name':'张*', 'age':'25', 'edu':'本科', 'phone':'188****888888', 'school':'河南农业大学' }, { 'name':'刘*', 'age':'21', 'edu':'本科', 'phone':'188****888888', 'school':'河南理工大学' } ], pageSize:2, currentPage:0 } })
数据的具体分页功能使用vue的计算属性computed来实现:
computed:{ dataShow: function(){ let start = this.currentPage*this.pageSize; let end = Math.min((this.currentPage+1)*this.pageSize, this.listArray.length) return this.listArray.slice(start, end) }, pageNum: function(){ return Math.ceil(this.listArray.length / this.pageSize) || 1 ; } }
计算属性computed的优点有很多,请自行百度。
各种点击方法如下:
methods: { nextPage: function(){ var vm = this; if (vm.currentPage == vm.pageNum - 1) return; vm.currentPage++; }, prePage: function(){ var vm = this; if (vm.currentPage == 0) return; vm.currentPage--; }, toPage: function(page){ var vm = this; vm.currentPage = page } }
前端代码:
<table> <tr> <th>姓名</th> <th>年龄</th> <th>学历</th> <th>电话</th> <th>毕业院校</th> </tr> <tr v-for="(item, index) in dataShow" :class="{ 'alt': index%2==1 }"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.edu }}</td> <td>{{ item.phone }}</td> <td>{{ item.school }}</td> </tr> </table> <div class="page"> <ul> <li> <a href="#" v-on:click="prePage"> <</a> </li> <li v-for="(item, index) in pageNum"> <a href="#" v-on:click="toPage(index)" :class="{active: currentPage==index}">{{ index+1 }}</a> </li> <li> <a href="#" v-on:click="nextPage">></a> </li> </ul> </div>
注意:v-for可循环数据list,对象object,数值number,字符串String,迭代对象Iterable