この記事では、Vueのフロントエンドページングとバックエンドページングを実装する方法を説明します。

<本文>
  <div id="アプリ">
    <table class="table table-bordered table-condensed">
      <tr class="bg-primary">
        <th class="text-center">並べ替え</th>
        <th class="text-center">ユーザー名</th>
        <th class="text-center">ユーザーの性別</th>
        <th class="text-center">都市</th>
      </tr>
      <tr class="text-center active" v-for="(v,i) リスト内" :key="i">
        <td>{{num(i)}}</td>
        <!-- <td>{{params.pagesize}}</td> -->
        <td>{{v.name}}</td>
        <td>{{v.sex}}</td>
        <td>{{v.addr}}</td>
      </tr>       
    </テーブル>
    <nav aria-label="ページナビゲーション" style="text-align: center;">
      <ul class="ページネーション">
        <!-- 前のページ -->
        <li @click="prePage()" :class="{'disabled':params.page == 1}">
          <a aria-label="前へ">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li :class="{'active': params.page == page}" v-for="(page,index) ページ内" :key="index" @click="curPage(page)">
          <a style="cursor: ポインター;">
            {{ページ}}
          </a>
        </li>
        <!-- 次のページ -->
        <li :class="{'disabled':params.page == totalPage}" @click="next()">
          <a aria-label="次へ">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</本文>

window.onload = 関数（）{
  // 1秒間に1つのリクエスト（トリガーイベント）のみが許可されます（複数のクリックは許可されます）スロットル
  新しいVue({
    el: '#app',
    データ： {
      パラメータ:{
        ページ:1,
        ページサイズ:20,
        名前：''
      },
      リスト: [],
      total:0, //エントリの総数 totalPage:0, //ページの総数 flag: false,
    },
    作成された() {
      この.getData()
    },
    計算: {
      ページ() {
        totalPage を this.totalPage とします。
        page = this.params.page; とします。
        // ページの総数が 10 未満です if(totalPage < 10) return totalPage;
        // 総ページ数が 10 より大きい場合は省略記号を追加します if (page <= 5) { // 最初の 5 ページ // (1) ページ番号が 5 未満の場合は、左側に 6 ページが表示されます return [1,2,3,4,5,6,'...',totalPage]
        } else if (page >= totalPage - 5) { // 次の 5 ページ console.log("trigger")
          // (2) ページ番号が総ページ数 - 5 より大きい場合、右側に 6 つの戻り値が表示されます: [1,'...',totalPage-5,totalPage-4,totalPage-3,totalPage-2,totalPage-1,totalPage]
        } else { // 中央の 5 ページ // (3) ページ番号は 5-(totalPage-5) の間です。左の間隔は 5 未満にすることはできず、右の間隔はページ総数 totalPage より大きくすることはできません。左の現在のページ番号は 1 未満にすることはできず、右の現在のページ + 番号はページ総数より大きくすることはできません。 return [1,'...',page-1,page,page+1,page+2,page+3,'...',totalPage]
        }
      },
      数値() {
        {ページサイズ、ページ} = this.params
        // (1-1) * 10 + 10 + 0 + 1 = 1;
        // (2-1) * 10 + 10 + 0 + 1 = 11 
        // 最初のページ = (現在のページ - 1) * ページあたりのエントリ数 + インデックス値 + 1。1 から始まることを確認してください。 return i => (ページ - 1) * ページサイズ + i + 1 // (現在のページ - 1 * ページあたりのエントリ数) + インデックス値 + 1
      }
    },
    メソッド: {
      取得データ() {
        if(this.flag) 戻り値:
        this.flag = true;
        // 以下はタイマーと同等です axios.get('http://localhost:3000/user/listpage',{params:this.params}).then(res => {
          コンソールログ('res',res.data.users)
          合計ユーザー数を res.data.users とします。
          this.total = 合計;
          this.totalPage = Math.ceil( this.total / this.params.pagesize);
          this.list = ユーザー
          this.flag = false;
        })
      },
      curPage(ページ) {
        if(page == '...') 戻り値 
        if(this.flag) 戻り値:
        this.params.page = ページ;
        この.getData()
      },
      プレページ() {
        // if (this.params.page == '...') 戻り値 
        （this.params.page > 1）の場合{
          if(this.flag) 戻り値:
          --this.params.page;
          console.log('ページ',this.params.page)
          この.getData()
        }
      },
      次（） {
        // if (this.params.page == '...') 戻り値 
        if(this.flag) 戻り値:
        console.log("実行", this.totalPage)
        this.params.page が this.totalPage より小さい場合、
          ++このパラメータページ;
          console.log('ページ',this.params.page)
          この.getData()
        }
      },
     } 
  })
}