Vueは、ページネーションコンポーネントVue-Paginaitonを実装しています
私はしばらくの間Vueを使用していたと感じていますが、Domを直接操作したくないと感じています。データに縛られたプログラミングエクスペリエンスは本当に良いです。ページングコンポーネントの実装。
ここのCSSはリリースされません。あなたはそれを読んで、github：vue-paginationで直接ダウンロードすることができます
最初に例の写真を撮りましょう
ステンシル
<div> <ul> <li v-if = "showfirsttext"> <a v-on：click = "cur-">前のページ</a> </li> <li v-for = "index> <a v-on：click =" pagechange（index） "> {{index}} </a> v-on：click = "cur ++">次のページ</a> </li> <li> <a>合計<i> {{all}} </i> </a> </li> </ul> </div>JSが導入される前に、ページの表示と分析を直接出力することができます。 {{index}}はページ番号であり、動的なレンダリングが必要です。
var app = new vue（{el： '＃app'、data：{currentPage：1、totlepage：28、visiblePage：10、msg： ''}、}）New Vue（{parameter}）を呼び出すことは、基本的なコンポーネントを作成し、変数App.elに割り当てることです。ページの総数は知っていますが、ページ番号を表示するには、計算する必要があるため、ページ番号を表示することが計算属性です。したがって、計算を使用する必要があります
計算：{//計算された属性：ページ番号配列に戻ると、$ watch（）なしでダーティチェックがここで自動的に実行されます。 pagenums：function（）{//初期化の前後のページ境界var lowpage = 1; var highpage = this.totlepage; var pagearr = []; if（this.totlepage> this.visiblepage）{//ページの総数が可視ページの数を超える場合、さらに処理が実行されます。 var subvisiblepage = math.ceil（this.visiblepage/2）; if（this.currentpage> subvisiblePage && this.currentPage <this.totlepage -subvisiblePage +1）{//通常のページローページローページ= this.currentPage- subvisiblepage; highpage = this.currentPage + subvisiblePage -1; } else if（this.currentPage <= subvisiblePage）{//前の数ページの論理ローページの処理= 1; highpage = this.visiblepage; } else {//最後の数ページの論理ローページの処理= this.totlepage -this.visiblepage + 1; highpage = this.totlepage; }} //上限と下のページの境界を決定した後、配列に押し込み、while（lowpage <= highpage）{pagearr.push（lowpage）;ローページ++; } pagearrを返します。 }}、HTMLテンプレートを見ると、V-IFディレクティブが見つかりました。コンテンツが真である場合、それが出力され、そうでない場合は明らかです。
焦点を当てる
<li v-for = "pagenums" v-bind：class = "{active：currentpage == index}"> <a v-on：click = "pagechange（index）"> {{index}} </a> </li> </li>v-forは、ループレンダリング出力計算属性ページネムです。各ループチャイルド要素は、v-bind：class to bind classにインデックスに割り当てられます。現在の角度マークにレンダリングするときは、クラスv-on：クリックしてイベントをバインドします。インデックスをパラメーターとして渡し、後で判断を下し、デフォルトでイベントイベントを渡します。
次に、メソッドフィールドをVUEオプションに追加します
方法：{pagechange：function（page）{if（this.currentpage！= page）{this.currentpage = page; this。$ dispatch（ 'page-change'、page）; //親と子のコンポーネント間の通信：==>子コンポーネントは、$ dipatch（）を介してイベントを配信し、親コンポーネントはバブルをバブルし、対応するイベントに耳を傾けます：page-change; }; }}コンポーネントの相互作用
コンポーネントの書き込みが終了しており、問題はユーザーがページをクリックして変更されることです。対応する変更を加えるために、他のコンポーネントにどのように通知しますか？ページコーナーが変更される関数の下にステートメントを挿入できます。しかし、この方法は非常に貧弱なアプローチです。利用可能
監視：{currentPage：function（oldvalue、newValue）{console.log（arguments）}}}CurrentPageデータが変更されたときに、値を取得できます。次に、他のコンポーネントに通知します。
完全なコードは、Github：Vue-Paginationにあります
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。