Paginierung basierend auf vue.js

Dieser Artikel stellt Ihnen hauptsächlich die native Schreibmethode des Paging vor, die in einen HTML-Teil und einen JS-Teil unterteilt ist. Er ist einfach und leicht zu verstehen und hat einen Referenzwert kann darauf verweisen

Dieser Artikel stellt hauptsächlich die native Schreibmethode des Paging basierend auf Vue vor.

Veröffentlichen Sie zuerst das Rendering:

HTML-Teil, verwenden Sie die Seite als separate Komponente

<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-Teil:

 <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-Teil:

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

Die Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Eine Zusammenfassung von Beispielen, wie Angularjs die Kommunikation zwischen Controllern implementiert

Verwendung des Better-Scroll-Plugins -in in Angular Method_AngularJS

Verwenden Sie Node, um Ihr eigenes Befehlszeilentool-Methoden-Tutorial zu erstellen

Das obige ist der detaillierte Inhalt vonPaginierung basierend auf vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!