13518219792
网站建设资讯

NEWS

网站建设资讯

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://njwzjz.com/article/ghedog.html

    其他资讯