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

先来看一下效果图：

功能描述：

1. 点击页面序号跳转到相应页面；

2. 点击单左/单右，向后/向前跳转一个页面；

3. 点击双左/双右，直接跳转到最后一页/第一页；

4. 一次显示当前页面的前三个与后三个页面；

5. 始终显示最后一个页面；

HTML：

 <!-- 分页开始 -->
<div class="u-pages" style="margin-bottom:20px; margin-top:10px;">
 <ul>
   <li v-if="showPre" class="crt"><a v-on:click="jumpFirst(cur)"> &lt;&lt; </a></li>
   <li v-if="showPre" class="crt"><a v-on:click="minus(cur)"> &lt; </a></li>

   <template v-for="index in indexs" >
     <li class="{{classRenderer(index)}}">
       <a v-on:click="btnClick(index)" >{{index}}</a>
     </li>
   </template>

   <li v-if="showMoreTail" class="crt">..</li>
   <li class="{{classRenderer(pageNo)}}"><a @click="btnClick(pageNo)">{{pageNo}}</a></li>
   <li v-if="showTail" class="crt"><a v-on:click="plus(cur)">&gt;</a></li>
   <li v-if="showTail" class="crt"><a v-on:click="jumpTail(cur)">&gt;&gt;</a></li>

 </ul>
</div>
<!-- 分页结束 -->

HTML方法分析： 

1、

<li class="{{classRenderer(index)}}">

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

2、

<a v-on:click="btnClick(index)" >{{index}}</a> 

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 < $this.cur; i++)
          {
            ar.push(i);
          }
        }
        if ($this.cur != $this.pageNo)
        {
          ar.push($this.cur);
        }

        if ( $this.cur < ( $this.pageNo - 3 ) )
        {
          ar.push($this.cur + 1);
          ar.push($this.cur + 2);
          ar.push($this.cur + 3);
          if ( $this.cur < ( $this.pageNo - 4 ) )
          {
            $this.$set("showMoreTail", true);
          }
        }else
        {
          $this.$set("showMoreTail", false);
          for (var i = ($this.cur + 1); i < $this.pageNo; i++)
          {
            ar.push(i);
          }
        }
        return ar;
      }
      //*********************分页结束******************************//
    }
}   

JS功能分析：indexs用于记录一共有多少页面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue.js实现分页  # vue  # 列表分页  # vue实现列表分页代码  # 前端框架Vue.js中Directive知识详解  # 前端框架Vue.js构建大型应用浅析  # angular  # avalon这三种MVVM框架优缺点  # Vue框架中正确引入JS库的方法介绍  # vue.js中mint-ui框架的使用方法  # 使用vue框架 Ajax获取数据列表并用BootStrap显示出来  # Vue2.0 UI框架ElementUI使用方法详解  # 前端框架学习总结之Angular、React与Vue的比较详解  # 基于Vuejs框架实现翻页组件  # 小白教程|一小时上手最流行的前端框架vue（推荐）  # 跳转到  # 分页  # 跳转  # 第一页  # 实现了  # 你自己  # 看一下  # 写上  # 先来  # 大家多多  # 当前页  # bottom  # margin  # px  # pages  # div  # gt  # style  # click  # crt 

相关文章： Swift中循环语句中的转移语句 break 和 continue  如何用花生壳三步快速搭建专属网站？  c# 在高并发场景下，委托和接口调用的性能对比  建站之星收费标准详解：套餐费用及年费价格表一览  教育培训网站制作流程,请问edu教育网站的域名怎么申请？  义乌企业网站制作公司,请问义乌比较好的批发小商品的网站是什么？  建站之星3.0如何解决常见操作问题？  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  如何基于云服务器快速搭建个人网站？  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  太原网站制作公司有哪些,网约车营运证查询官网？  建站之星如何一键生成手机站？  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  网站制作公司排行榜,抖音怎样做个人官方网站  公司网站制作费用多少,为公司建立一个网站需要哪些费用？  专业网站建设制作报价,网页设计制作要考什么证？  如何通过万网虚拟主机快速搭建网站？  电商网站制作公司有哪些,1688网是什么意思？  郑州企业网站制作公司,郑州招聘网站有哪些？  如何在建站主机中优化服务器配置？  开源网站制作软件,开源网站什么意思？  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  沈阳个人网站制作公司,哪个网站能考到沈阳事业编招聘的信息？  在线流程图制作网站手机版,谁能推荐几个好的CG原画资源网站么？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  建站之星×万网：智能建站系统+自助建站平台一键生成  建站主机无法访问？如何排查域名与服务器问题  C#如何序列化对象为XML XmlSerializer用法  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  测试制作网站有哪些,测试性取向的权威测试或者网站？  建站之星IIS配置教程：代码生成技巧与站点搭建指南  婚礼视频制作网站,学习*后期制作的网站有哪些？  如何正确下载安装西数主机建站助手？  建站之星代理如何优化在线客服效率？  哈尔滨网站建设策划,哈尔滨电工证查询网站？  如何用y主机助手快速搭建网站？  如何在建站之星网店版论坛获取技术支持？  建站VPS推荐：2025年高性能服务器配置指南  如何在Golang中使用encoding/gob序列化对象_存储和传输数据  如何通过西部建站助手安装IIS服务器？  网站专业制作公司有哪些,做一个公司网站要多少钱？  实例解析Array和String方法  如何选择高效便捷的WAP商城建站系统？  定制建站方案优化指南：企业官网开发与建站费用解析  家具网站制作软件,家具厂怎么跑业务？  Python多线程使用规范_线程安全解析【教程】  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  建站之星2.7模板快速切换与批量管理功能操作指南  唐山网站制作公司有哪些,唐山找工作哪个网站最靠谱？