<div class="page-bar">
 <ul>
 <li v-if="showFirstText"><a v-on：click="cur--">上一頁</a></li>

 <li v-for = "index in pagenums">
 <a v-on:click="pageChange(index)">{{index}}</a>

 </li>

 <li v-if="showNextText"><a v-on：click="cur++">下一頁</a></li>
 <li><a>共<i>{{all}}</i>頁</a></li>
 </ul>

</div>

var app = new Vue({
 el: '#app',
 data:{
 currentpage: 1,
 totlepage: 28,
 visiblepage:10,
 msg: ''
 },
})

computed: {
 //計算屬性：返回頁碼數(shù)組，這里會自動進行臟檢查，不用$watch();
 pagenums: function(){
 //初始化前后頁邊界
 var lowPage = 1;
 var highPage = this.totlepage;
 var pageArr = [];
 if(this.totlepage > this.visiblepage){//總頁數(shù)超過可見頁數(shù)時，進一步處理；
 var subVisiblePage = Math.ceil(this.visiblepage/2);
 if(this.currentpage > subVisiblePage && this.currentpage < this.totlepage - subVisiblePage +1){//處理正常的分頁
 lowPage = this.currentpage - subVisiblePage;
 highPage = this.currentpage + subVisiblePage -1;
 }else if(this.currentpage <= subVisiblePage){//處理前幾頁的邏輯
 lowPage = 1;
 highPage = this.visiblepage;
 }else{//處理后幾頁的邏輯
 lowPage = this.totlepage - this.visiblepage + 1;
 highPage = this.totlepage; 
 }
 }
 //確定了上下page邊界后，要準(zhǔn)備壓入數(shù)組中了
 while(lowPage <= highPage){
 pageArr.push(lowPage);
 lowPage ++;
 }

 return pageArr;
 }
 },

<li v-for="index in pagenums" v-bind:class="{ active: currentpage == index}">
 <a v-on:click="pageChange(index)">{{ index }}</a>
 </li>

methods:{
 pageChange: function(page){
 if (this.currentpage != page) {
 this.currentpage = page;
 this.$dispatch('page-change', page); //父子組件間的通信：==>子組件通過$diapatch(),分發(fā)事件，父組件冒泡通過v-on:page-change監(jiān)聽到相應(yīng)的事件；
 };
 }
 }

watch: {
 currentpage: function(oldValue , newValue){
 console.log(arguments)
 }
}