基于vue.js实现的分页

本文主要介绍基于vue的分页原生写法。

先po上效果图：

html部分，将page作为一个单独的组件

<script type=\"text/x-template\" id=\"page\">
  <ul class=\"pagination\">
   <li v-show=\"current != 1\" @click=\"current-- && goto(current)\">
    <a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >上一页</a>
   </li>
   <li v-for=\"index in pages\" @click=\"goto(index)\" :class=\"{\'active\':current == index}\" :key=\"index\">
    <a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >{{index}}</a>
   </li>
   <li v-show=\"allpage != current && allpage != 0 \" @click=\"current++ && goto(current++)\">
    <a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >下一页</a>
   </li>
  </ul>
 </script>
 <div id=\"app\">
  <page></page>
 </div>

js部分：

 <script>
  Vue.component(\"page\", {
   template: \"#page\",
   data: function () {
    return {
     current: 1, // 当前页码
     showItem: 5, // 最少显示5个页码
     allpage: 13 // 总共的
    }
   },
   computed: {
    pages: function () {
     var pag = [];
     if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
      //总页数和要显示的条数那个大就显示多少条
      var i = Math.min(this.showItem, this.allpage);
      while (i) {
       pag.unshift(i--);
      }
     } else { //当前页数大于显示页数了
      var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
       i = this.showItem;
      if (middle > (this.allpage - this.showItem)) {
       middle = (this.allpage - this.showItem) + 1
      }
      while (i--) {
       pag.push(middle++);
      }
     }
     return pag
    }
   },
   methods: {
    goto: function (index) {
     if (index == this.current) return;
     this.current = index;
     //这里可以发送ajax请求
    }
   }
  })
  var vm = new Vue({
   el: \'#app\',
  })
 </script>

css部分：

 body {
   font-family: \"Segoe UI\";
  }
  li {
   list-style: none;
  }
  a {
   text-decoration: none;
  }
  .pagination {
   position: relative;
  }
  .pagination li {
   display: inline-block;
   margin: 0 5px;
  }
  .pagination li a {
   padding: .5rem 1rem;
   display: inline-block;
   border: 1px solid #ddd;
   background: #fff;
   color: #0E90D2;
  }
  .pagination li a:hover {
   background: #eee;
  }
  .pagination li.active a {
   background: #0E90D2;
   color: #fff;
  }

最后附上github地址：https://github.com/AmberWuWu/vue-page

以上所述是小编给大家介绍的基于vue.js实现的分页，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！