利用VUE框架，实现列表分页功能示例代码

classRenderer()方法实现了当点击页面索引是，点击页面获得选中效果

2、

{
{
index}
}
    

btnClick()方法，实现了点击页面索引，跳转到相应页面

showPre showTail

showPre控制跳转到第一页与跳转到前一页的按钮的显示与消除

showTail控制跳转到最后一页与跳转到后一页的按钮的显示与消除

cur

记录当前页序号

jumpFirst(cur) minus(cur) plus(cur) jumpTail(cur)

实现按钮跳转功能

JS：

module.exports = {
 data: function () {
 return {
 cur:1, showTail:true, showMorePre: false, showMoreTail: false, }
 }
, methods:{
 jumpFirst:function(data){
     var $this = this;
     data = 1;
     $this.cur = data;
 if (data == 1 ) {
     $this.$set("showPre", false);
 }
else {
     $this.$set("showPre", true);
 }
 $this.$am.ajax({
 url:window.$ApiConf.api_order_detail_list, type:'GET', data:{
start: 1}
, success: function(data){
     console.log(data);
     $this.$set("records", data.record.records);
     $this.$set("start", data.record.query.start);
     $this.$set("total", data.record.query.total);
     $this.$set("limit", data.record.query.limit);
 }
 }
    ) $this.$set("showTail", true);
     return data;
 }
, minus:function(data){
     var $this = this;
     data--;
     $this.cur = data;
     $this.$set("showTail", true);
 if(data == 1){
     $this.$set("showPre", false);
 }
else{
     $this.$set("showPre", true);
 }
 $this.$am.ajax({
 url:window.$ApiConf.api_order_detail_list, type:'GET', data:{
start: 1 + $this.limit * (data-1) }
, success:function(data){
     console.log(data);
     $this.$set("records", data.record.records);
     $this.$set("start", data.record.query.start);
     $this.$set("total", data.record.query.total);
     $this.$set("limit", data.record.query.limit);
 }
 }
    ) return data;
 }
, plus: function(data){
     var $this = this;
     data++;
     $this.cur = data;
     $this.$set("showPre", true);
 if (data == $this.pageNo) {
     $this.$set("showTail", false);
 }
else {
     $this.$set("showTail", true);
 }
 $this.$am.ajax({
 url:/* 这里写上你自己请求数据的路径 */, type:'GET', data:{
start: 1 + $this.limit * (data-1) }
, success:function(data){
     console.log(data);
     $this.$set("records", data.record.records);
     $this.$set("start", data.record.query.start);
     $this.$set("total", data.record.query.total);
     $this.$set("limit", data.record.query.limit);
 }
 }
    ) return data;
 }
, classRenderer:function(index){
     var $this = this;
     var cur = $this.cur;
 if(index != cur){
     return 'crt';
 }
     return '';
 }
, btnClick:function(data){
     var $this = this;
 if(data == 1){
     $this.$set("showPre", false);
 }
else{
     $this.$set("showPre", true);
 }
 if (data == $this.pageNo) {
     $this.$set("showTail", false);
 }
else {
     $this.$set("showTail", true);
 }
 if (data != $this.cur) {
     $this.cur = data;
 $this.$am.ajax({
 url:window.$ApiConf.api_order_detail_list, type:'GET', data:{
start: 1 + $this.limit * (data-1) }
, success:function(data){
     console.log(data);
     $this.$set("records", data.record.records);
     $this.$set("start", data.record.query.start);
     $this.$set("total", data.record.query.total);
     $this.$set("limit", data.record.query.limit);
 }
 }
) }
 }
, jumpTail:function(data){
     var $this = this;
     data = $this.pageNo;
     $this.cur = data;
 if (data == $this.pageNo) {
     $this.$set("showTail", false);
 }
else {
     $this.$set("showTail", true);
 }
 $this.$am.ajax({
 url:window.$ApiConf.api_order_detail_list, type:'GET', data:{
start: 1 + $this.limit * (data-1) }
, success:function(data){
     console.log(data);
     $this.$set("records", data.record.records);
     $this.$set("start", data.record.query.start);
     $this.$set("total", data.record.query.total);
     $this.$set("limit", data.record.query.limit);
 }
 }
    ) $this.$set("showPre", true);
     return data;
 }
, computed: {
 //*********************分页开始******************************// indexs: function(){
     var $this = this;
     var ar = [];
     if ($this.cur >
 3) {
     ar.push($this.cur - 3);
     ar.push($this.cur - 2);
     ar.push($this.cur - 1);
 }
else {
     for (var i = 1;
     i 
JS功能分析：indexs用于记录一共有多少页面