VUEは、ページの効果を実現します

第1ペーストレンダリング：

 

 

 最初の4つの、現在のページの最後の4、最初と最後を表示

pagination.vue：

<テンプレート> 
    の<divクラス= 'ページネーション'> 
        <のhref = "javascriptの:;" ：クラス= "{無効：pageNow == 1}" @をクリックして= 'changeIndex - '> << /> 
        <UL> 
            <LI：クラス= "{活性：pageNow ==アイテム}" V-ため=」 getpagesで（項目、インデックス）（）」：キー= 'インデックス'> 
                は、<a href = "javascriptの:;" = 'アイテム！= "..."' V-IF @クリック= 'changeIndex =アイテム'> {{項目}} </a>の
                <スパンV-ELSE> {{項目}} </ span>を
            </李> 
        </ UL> 
        <のhref = "javascriptの:;" ：クラス= "{無効：pageNow == TOTALPAGE}" @クリック= 'changeIndex ++' >> </a>の 
    </ DIV> 
</テンプレート> 
<スクリプト> 
輸出デフォルト{ 
    データ（）{
            pageNow：this.cur || this.value || 1、//当前页 
                arr.unshift（」...
        } 
    }、
    小道具：{ 
        'CUR'：{ 
            タイプ：Number 
        }、
        'TOTALPAGE'：{ 
            タイプ：Number、
            必要：真
        }、
        "値"：{ 
            タイプ：Number 
        } 
    }、
    メソッド：{ 
        getpages（）{ 
            VARのARR = [] 
            のための（VAR I = Math.max（this.pageNow-4,1）; I <= Math.min（this.totalPageは、this.pageNow + 4）は、iは++）{ 
                arr.push（I）
            } 
            もし（ARR [0]> 2）{ 
            } 
            IF（ARR [0]！= 1）{ 
                arr.unshift（1）
            } 
            IF（ARR [arr.length - 1] <this.totalPage-1）{ 
                arr.push（ '...'）
            } 
            IF（ARR [arr.length - 1]！= this.totalPage）{ 
                arr.push （this.totalPage）
            } 
            戻りARR 
        } 
    }、
    計算：{ 
        changeIndex：{ 
            得る（）{ 
                this.pageNowを返す
            }、
            （V）{設定
                （V> = 1つの&& V <= this.totalPage）であれば{ 
                    this.pageNow = V 
                    この。$（V 'changepage'）を放出し
                    、これを。$（V、 '入力'）を放出します
                    この$（ 'CUR：更新'、v）を放出する。
                } 
            } 
        } 
    } 
} 
</ SCRIPT> 
<スタイルのlang = "CSS"> 
    .pagination {マージン：; 10pxの0} 
    行;：インラインブロック{ディスプレイを.pagination -height：30px;垂直整列：中央;フォントサイズ：16pxに;色：＃333;} 
    .pagination a.disabled {色：＃1 c0c4cc;} 
    .pagination UL {表示：インラインブロック;垂直整列：中間;} 
    .pagination李{フロート：左;幅：30px;高さ：30px;テキスト整列：センター;行の高さ：30px;マージン：0 5pxの;} 
    .paginationリチウムのA {表示：ブロック;} 
    .pagination李。アクティブ、.paginationのLiは：ホバー{色：青;} 
</スタイル>

　呼び出しの3つの方法のいずれかを選択します。

<ページネーション：= CUR '1'：changepage = 'changeIndex' @ TOTALPAGE = '100' />   
<ページネーション：TOTALPAGE = '100' Vモデルは= 'CUR' /> 
<ページネーション：TOTALPAGE = '100'：CUR。同期= 'CUR' />