本篇文章主要介紹了vue的一個分頁元件的範例程式碼，現在分享給大家，也給大家做個參考。
分頁元件在專案中常常要用到之前一直都是在網路上找些jq的控制項來用(逃..),最近幾個專案用上vue了專案又剛好需要一個分頁的功能。具體如下：
檔案page.vue為一個pc端的分頁元件,基礎的分頁功能都有，基本的思路是，頁面是用資料來展示的，那就直接操作相關資料來改變視圖
Getting started
import Page from './page.vue' 從目錄引入該檔案,在父元件註冊使用
<page :total='total' :current-index="currentIndex" :listLen='listLen' @getPage='getPage'></page>
total：總頁碼
currentIndex：目前頁碼
listLen：頁面ui要顯示幾個清單頁
getPage： page元件把每個事件的頁碼傳送給父元件，用來向後台發送相關請求來展示內容
about page.vue
html 部分
<ul class="item" v-show="arr.length">
<li @click="start">首页</li>
<li @click="pre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><<</a></li> 上一列表页
<li @click="currentPre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><</a></li> 点解当前列表页上一页
<li v-for="(item,index) in arr" :class="{active: item===num}" @click="getPage(item)">{{item}}</li>
<li @click="currentNext"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >></a></li> 点解当前列表页下一页
<li @click="next"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >>></a></li> 下一列表页
<li @click="end">尾页</li>
</ul>相關資料說明
data() {
return {
num: Number, //表示当前页码高亮
arr: [], //页面显示的数组
page: Number, //一页显示多少个,可以自定义,不能大于总页码
Remainder:Number, //是否整除
merchant:Number, // 比较总页数和page页
};
},
props: {
//分页的总数
total: {
type: Number,
default: 5
},
//当前页
currentIndex: {
type: Number,
default: 1
},
//一个列表页显示多少页码
listLen:{
type: Number,
default: 5
}
},methods 裡面的相關事件，想法主要是判斷目前清單頁的第一項和最後一項.透過循環來該變arr成員的值
bash
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build
之前用ember.js寫過一個類似元件，現在基於vue2.0封裝一個，方便以後用於不同項目，可以拿來直接使用.
小總結：之前也接觸過ng4,發現這些相似框架排除過渡動畫，頁面展示都是透過後台發過來或前端模擬的資料來渲染頁面，當然這只是相通的一小部分，也是這類框架基本思想。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
以上是在vue中如何實作分頁元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
