vue.js に基づくページネーション

この記事では、vue をベースにしたネイティブのページング方法を HTML 部分と JS 部分に分けて紹介します。非常に優れているので、必要な方は参考にしてください。参考にしてください

この記事では主にvueをベースにしたネイティブページング方法を紹介します。

最初にレンダリングを投稿します:

html パーツ、ページを別のコンポーネントとして使用します

<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 パーツ:

 <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 パーツ:りー

上記は私が皆さんのためにまとめたものであり、将来皆さんに役立つことを願っています。

関連記事:

Agularjsコントローラー間の通信方法例まとめ

Angular_AngularJSのベタースクロールプラグインの使い方

nodeを使って独自コマンドを作成する方法のチュートリアルラインツール

以上がvue.js に基づくページネーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。