vue的一個分頁組件的示例代碼

<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
 }
 },

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build