Pagination based on vue.js

This article mainly introduces you to the native writing method of paging based on vue. The code is divided into html part and js part. It is simple and easy to understand. It is very good and has reference value. Friends who need it can refer to it.

This article mainly Introducing the native writing method of paging based on vue.

First post the renderings:

#html part, use the page as a separate component

<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="{&#39;active&#39;: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>
 <p id="app">
  <page></page>
 </p>

js part:

 <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: &#39;#app&#39;,
  })
 </script>

css part:

 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;
  }

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Summary of examples of communication methods between controllers in Angularjs

Using the better-scroll plug-in in Angular Method_AngularJS

Using node to create your own command line tool method tutorial

The above is the detailed content of Pagination based on vue.js. For more information, please follow other related articles on the PHP Chinese website!