资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

vue2.0与bootstrap3如何实现列表分页效果

小编给大家分享一下vue2.0与bootstrap3如何实现列表分页效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

我们提供的服务有：网站设计、成都网站制作、微信公众号开发、网站优化、网站认证、哈巴河ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的哈巴河网站制作公司

具体内容如下



  
    
    使用vue2.0与bootstrap3进行简单列表分页
    
    
  
  

    
      
        
          
            #
            名称
            操作
          
        
        
          0" v-for="item in listData">
            {{item.id}}
            {{item.name}}
            
              编辑
              删除
            
          
          
            
              
                  
                    
                      
                        共{{pageData.total}}条，当前显示第
                        
                        {{pageData.itemStart}}
                        {{pageData.itemStart}}-{{pageData.itemEnd}}
                        条
                      
                    
                                                                                                                            首页                                                                                                                  首页                                                                                                                上一页                                                                                                                  上一页                                                                                    5 && pageData.curPage > 3" class="next disabled">                             ...                                                                                                                  {{pageItem}}                                                                                                                          {{pageItem}}                                                                                                                   5 && pageData.curPage < pageData.totalPage-2" class="next disabled">                             ...                                                                                   下一页                                                                                                                  下一页                                                                                                                末页                                                                                                                  末页                                                                                    5" class="next disabled">                             
  •                                                                                           
    •                                                                           
                                                                                                                 function getData($page,$pageSize){//获取数据，可使用各种语言替换^_^       var $data = [];       for (var $i=($page-1)*$pageSize+1; $i <=$page*$pageSize ; $i++) {          $data.push( {           id:$i,           name:'name'+$i         });       }       var $returnData = {'data':$data,'total':103};       return $returnData;     }     var vm = new Vue({       el: '#table',       data: {         listData:[],         page: 1,//当前页码         pageSize: 10,//每页条数         total:0,//总数         pageData: {           curPage: 1,           pageSize: 10,           total: 0,           totalPage: 0,           pageIndex: [],           itemStart: 0,           itemEnd: 0         }       },       methods:{         listItems: function () {//列出需要的数据           var returnData =getData(this.page,this.pageSize);           this.listData = returnData.data;           this.total=returnData['total'];           this.setPageList(this.total, this.page, this.pageSize);         },         editItem:function ($id) {//编辑操作在这儿哟           alert('编辑第'+$id+'条数据！');         },         deleteItem:function ($id) {//这里可以删除数据           alert('删除第'+$id+'条数据！');         },         setPageList: function (total, page, pageSize) {         total = parseInt(total);         var curPage = parseInt(page);         pageSize = parseInt(pageSize);         var totalPage = Math.ceil(total / pageSize);         var itemStart = (curPage - 1) * pageSize + 1;         if (curPage == totalPage) {           itemEnd = total;         } else {           itemEnd = curPage * pageSize;         }         var pageIndex = [];         if (curPage >= 1 && curPage <= totalPage) {           if (totalPage < 5) {//5页以内             for (var $i = 1; $i <= totalPage; $i++) {               pageIndex.push($i);             }           } else {//大于5页             if (curPage == 1) {               pageIndex = [curPage, curPage + 1, curPage + 2, curPage + 3, curPage + 4];             } else if (curPage == 2) {               pageIndex = [curPage - 1, curPage, curPage + 1, curPage + 2, curPage + 3];             } else if (curPage == totalPage - 1) {               pageIndex = [curPage - 3, curPage - 2, curPage - 1, curPage, totalPage];             } else if (curPage == totalPage) {               pageIndex = [curPage - 4, curPage - 3, curPage - 2, curPage - 1, curPage];             } else {               pageIndex = [curPage - 2, curPage - 1, curPage, curPage + 1, curPage + 2];             }           }         }         this.pageData.curPage = curPage;         this.pageData.pageSize = pageSize;         this.pageData.total = total;         this.pageData.totalPage = totalPage;         this.pageData.pageIndex = pageIndex;         this.pageData.itemStart = itemStart;         this.pageData.itemEnd = itemEnd;       },       changeCurPage: function (page, pageSize) {//换页         this.page = page;         this.pageSize = pageSize;         this.listItems();       },       goPage: function (pageSize, totalPage) {//跳转页         var pageIndex = this.$refs.goPage.value;         if (pageIndex <= 0) {           pageIndex = 1;           this.$refs.goPage.value = 1;         } else if (pageIndex >= totalPage) {           pageIndex = totalPage;           this.$refs.goPage.value = totalPage;         }         this.changeCurPage(pageIndex, pageSize);       }       }     });     window.onload = function(){      console.log('Hello World!');      vm.listItems();     };         

    以上是“vue2.0与bootstrap3如何实现列表分页效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


    网站栏目：vue2.0与bootstrap3如何实现列表分页效果
    当前地址：http://cdkjz.cn/article/ghedog.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    全网整合营销推广香港机房服务器托管美美搬家造型师设计虚拟主机中国（西部）云计算中心小谭建站温江网站建设模板商城网站四川晃众门窗

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图