第二种使用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