ホームページ > ウェブフロントエンド > Vue.js > vuejs-paginate の使用方法

vuejs-paginate の使用方法

青灯夜游
リリース: 2023-01-13 00:45:46
オリジナル
1987 人が閲覧しました

方法: 1. npm コマンドを使用してブートストラップ プラグインと vuejs-paginate プラグインをインストールします; 2. import および "Vue.component()" ステートメントを使用してプラグインを導入します; 3. 追加「」のコードで十分です。

vuejs-paginate の使用方法

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue.js Paginate は、シンプルな Vue.js ページング コンポーネントです。ページング用のシンプルな API を提供します。使いやすく、CSS を通じてコン​​ポーネントのスタイルをカスタマイズできます。

vue でページング プラグイン vuejs-paginate を使用します

1. 依存ライブラリをインストールします (ブートストラップ CSS スタイルを使用する必要があります) ) とページネーション プラグイン (vuejs-paginate)

npm install bootstrap@3.3.0 -–save-dev
npm install vuejs-paginate --save
ログイン後にコピー

2.

を使用して

import Paginate from 'vuejs-paginate'
Vue.component('paginate', Paginate)
ログイン後にコピー

を導入し、使用しますコンポーネント内の

<paginate
  :page-count="20"
  :click-handler="functionName"
  :prev-text="&#39;Prev&#39;"
  :next-text="&#39;Next&#39;"
  :container-class="&#39;className&#39;">
</paginate>
ログイン後にコピー

例:

vuejs-paginate の使用方法

関連する推奨事項:「vue.js チュートリアル

以上がvuejs-paginate の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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