ホームページ > ウェブフロントエンド > jsチュートリアル > Vue でのページネーションの使用

Vue でのページネーションの使用

Guanhui
リリース: 2020-06-13 09:52:02
転載
2675 人が閲覧しました

Vue でのページネーションの使用

ページネーション機能を使用すると、ユーザーはデータをより小さなチャンクまたはページで視覚化できるようになり、ユーザー エクスペリエンスが向上します。ここでは、一度にデータの一部だけを表示できるように、ページネーションを備えた Vue.js コンポーネントを作成する方法を示します。

まず JavaScript オブジェクトを 1 つずつ調べてから、テンプレートを表示します。

必要なローカル データはページ番号だけです。

data(){
    return {
      pageNumber: 0  // default to page 0
    }
}
ログイン後にコピー

props にはデータが必要ですが、各ページに最大のデータ量を保存するために size パラメーターも定義しました。

props:{
    listData:{
      type:Array,
      required:true
    },
    size:{
      type:Number,
      required:false,
      default: 10
    }
}
ログイン後にコピー

メソッドでは、次のページと前のページに対して 2 つのメソッドを定義しました:

methods:{
      nextPage(){
         this.pageNumber++;
      },
      prevPage(){
        this.pageNumber--;
      }
}
ログイン後にコピー

計算された属性値を使用して、合計ページ数を計算します:

pageCount(){
      let l = this.listData.length,
          s = this.size;
      return Math.floor(l/s);
}
ログイン後にコピー

paginatedData は、フィルターされたデータの計算された属性を取得することです:

paginatedData(){
    const start = this.pageNumber * this.size,
          end = start + this.size;
     return this.listData.slice(start, end);
}
ログイン後にコピー

修正: 最初は .splice を使用して配列をコピーしましたが、より完璧な方法は .slice メソッドを使用することです、ありがとうアレクサンダー・カレラスです。

テンプレート内:

<div>
  <ul>
    <li v-for="p in paginatedData">
      {{p.first}} 
      {{p.last}}  
      {{p.suffix}}
    </li>
  </ul>
  <button @click="prevPage">
    Previous
  </button>
  <button @click="nextPage">
    Next
  </button>
</div>
ログイン後にコピー

ユーザーが最初または最後でボタンを押せないようにしたいと考えています。prevPage ボタンについては、次のように追加しました:disabled="pageNumber=0" および for nextPage ボタンに、disabled="pageNumber >= pagecount -1" を追加しました。

推奨チュートリアル: 「JS チュートリアル

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

関連ラベル:
ソース:learnku.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート