Vueドキュメントでのページングバーコンポーネントの実装プロセスの詳細な説明

Vue は人気のある JavaScript フレームワークであるため、開発中にページング関数を使用する必要があることがよくあります。 Vue ドキュメントにはページング バー コンポーネントが用意されており、開発者にページングを実装する便利で迅速な方法を提供します。この記事では、ページングバーコンポーネントの実装プロセスを詳しく紹介します。

まず、Vue の公式ドキュメントには、Pagination コンポーネントの具体的な実装が記載されています。コンポーネントでは、まず Vue コンポーネントと CSS スタイルを導入します:

<template>
  <nav>
    <ul class="pagination">
      <li v-if="current_page > 1">
        <a href="" aria-label="Previous"
           @click.prevent="changePage(current_page - 1)">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li v-for="page in pages"
          v-bind:class="[ page == current_page ? 'active' : '' ]">
        <a href=""
           @click.prevent="changePage(page)">@{{ page }}</a>
      </li>
      <li v-if="current_page < last_page">
        <a href="" aria-label="Next"
           @click.prevent="changePage(current_page + 1)">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<style>
  .pagination li {
    cursor: pointer;
  }
  .pagination li.active span {
    background-color: #3490dc;
    color: #fff;
    border-color: #3490dc;
  }
</style>

このテンプレートでは、次の重要なポイントがわかります:

• v-ifおよび v-for 命令: v-if を使用して前のページと次のページを表示するかどうかを制御し、v-for を使用してページング ページを移動します。番号。
• classBinding: v-bind:class を通じて現在のページ (アクティブ) のスタイルをバインドします。
• @click.prevent コマンド: @click.prevent を使用して、ページ分割ページ番号のクリック イベントを監視します。
• {{}} マーク: {{}} マークを使用すると、ページネーションのページ番号が表示されます。

これらの重要なポイントを 1 つずつ分析してみましょう。

前後のページの制御

まず、現在のページ番号に基づいて、前のページと次のページを表示する必要があるかどうかを判断する必要があります。テンプレート内の v-if の実装によると、v-if="current_page > 1" は、前のページのボタンのみが表示されることを意味することがわかります。現在のページ番号が 1 より大きい場合。

同様に、 v-if="current_page < last_page" は、現在のページ番号が最大ページ番号より小さい場合にのみ「次のページ」ボタンが表示されることを意味します。

ページ番号トラバーサル

次に、ページ分割されたページ番号リストをページ上に表示する必要があります。テンプレート内の v-for の実装によれば、pages の v-for="page in pages" が計算された Vue にあることがわかります。属性 (計算) 返された配列。

ここでは、合計ページ数と、ページ番号リストにどのページ番号を表示する必要があるかを計算する必要があります。これを実現するために、Vue の計算プロパティを使用します。

computed: {
  pages: function() {
    var pages = [];
    for (var i = this.current_page - this.offset; i <= this.current_page + this.offset; i++) {
      if (i > 0 && i <= this.last_page) {
        pages.push(i);
      }
    }
    return pages;
  }
}

このうち、pages はページ番号リスト、current_page は現在のページ番号、last_page です。 は最大ページ番号です。 offset はオフセットで、現在のページ番号の左右に何ページ番号が表示されるかを示します。

計算により、ページ番号リストにどのページ番号を表示するかを取得します。次に、テンプレートで v-for を使用して、計算されたページ番号をトラバースし、ページ上にリストを表示します。

スタイルのバインド

現在のページ番号のスタイルを一意にするために、指定されたクラスをテンプレート内の現在のページに追加する必要があります。テンプレートでは、v-bind:class を使用してこの機能を実現します。

<li v-for="page in pages"
    v-bind:class="[ page == current_page ? 'active' : '' ]">
  <a href=""
     @click.prevent="changePage(page)">@{{ page }}</a>
</li>

このコードでは、v-bind:class が配列をバインドします。配列には 2 つの要素があります。 1 つ目は、現在のページ番号が走査されたページ番号と等しいかどうかを判断することです。等しい場合は、現在のページ番号を表す active クラスをバインドします。等しくない場合は、空の文字列クラスをバインドします。このようにして、指定したスタイルを現在のページ番号にバインドできます。

クリック イベントの監視

ユーザーが特定のページ番号をクリックすると、ページ番号を取得し、対応するジャンプまたはデータ リクエストを実行する必要があります。 Vue では、@click.prevent を使用してクリック イベントを登録し、デフォルトの動作を防止します。

<a href=""
   @click.prevent="changePage(page)">@{{ page }}</a>

ここの changePage はメソッドです。このメソッドを Vue インスタンスで定義します。

methods: {
  changePage: function(page) {
    this.current_page = page;
    this.$emit('page-changed', page);
  }
}

このメソッドでは、現在のページ番号を更新し、カスタム イベント page-changed をトリガー (発行) します。このカスタム イベントを通じて、親コンポーネントでイベントをリッスンし、特定の操作を実装できます。

概要

上記の分析を通じて、Vue ページング バー コンポーネントの実装が比較的単純であることがわかります。しかし、このコンポーネントの基礎となる原理をマスターすることで、Vue フレームワークをより巧みに使用し、実際の開発でページング機能をより柔軟かつ便利に適用できるようになります。

以上がVueドキュメントでのページングバーコンポーネントの実装プロセスの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。