<script src="https://unpkg.com/vue/dist/vue.js"&gt;
<script type="text/javascript">
var app = new Vue({
el: '#app',data: {
// 省略的符号
sign:'...',// 省略号位置
signIndex:4,// 总页数
totalPageCount: 4,// 当前页
currentPage:1,// 显示在页面的数组列表
pagingList:[]
},watch: {
totalPageCount (val) {
var that = this
if (!val || val == '') return;
that.currentPage = 1;
that.init()
},currentPage (val) {
var that = this
that.init()
}
},methods: {
// 跳转到某页码
next (num) {
var that = this
if (num <= 1) that.currentPage = 1;
else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;
else that.currentPage = num;
},// 初始化数据
fetchData () {
var that = this

that.pagingList = [];
var tmp = null;


if ((that.totalPageCount) > 6) {
 if (((that.totalPageCount-1) == (that.totalPageCount - that.currentPage)) && (that.totalPageCount - that.currentPage) > 5) {
  for (var i=1;i<7;i++) {
   if (i < that.signIndex) {
    tmp = {key:i,value:i }
   } else if (i== that.signIndex) {
    tmp = {key:that.sign,value:0 }
   } else if (i == (that.signIndex + 1) ) {
    tmp = {key:that.totalPageCount - 1,value:that.totalPageCount - 1 }
   } else {
    tmp = {key:that.totalPageCount,value:that.totalPageCount }
   }
   that.pagingList.push(tmp)
  }
 } else if (((that.totalPageCount - that.currentPage) <= that.signIndex)){
  var starNum = that.totalPageCount - 5;
  for (var i=starNum;i<starNum+6;i++) {
   tmp = {key:i,value:i }
   that.pagingList.push(tmp)
  }
 } else {
  var starNum = that.currentPage - 1;
  for (var i=1;i<7;i++) {
   if (i < that.signIndex) {
    tmp = {key:(starNum - 1) + i,value:(starNum - 1) + i }
   } else if (i== that.signIndex) {
    tmp = {key:that.sign,value:that.totalPageCount }
   }
   that.pagingList.push(tmp)
  }
 }
} else {
 for (var i =0; i <that.totalPageCount; i++) {
  tmp = {key:i+1,value:i+1 }
  that.pagingList.push(tmp)
 }
}

},init () {
var that = this

that.fetchData()

}
},mounted () {
var that = this

that.init()
}
})