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をもっとサポートすることを願っています。