vue分页插件的使用方法     .4   这篇文章主要介绍了vue分页插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue分页插件的具体代码，供大家参考，具体内容如下

分页插件代码：

 div 
 div 
 div 
 span : @click="lessPage()" 上一页 /span 
 span v-show="current_page 5" @click="jumpPage(1)" 1 /span 
 span v-show="efont" ... /span 
 span v-for="num in indexs" : @click="jumpPage(num)" {{num}} /span 
 span v-show="ebehind" ... /span 
 span : @click="addPage()" 下一页 /span 
 span v-show="current_page pages-4" @click="jumpPage(pages)" {{pages}} /span 
 #-- span 跳转到： /span -- 
 #-- span input type="text" v-model="changePage" /span -- 
 #-- span @click="jumpPage(changePage)" GO /span -- 
 /div 
 /div 
 /div 

vue代码

data: {
 current_page: result.resultObj.number + 1, //当前页
 pages: result.resultObj.totalPages, //总页数
 changePage: '',//跳转页
 nowIndex: 0
 computed: {
 show: function () {
 return this.pages this.pages != 1
 凡科抠图tart: function () {
 return this.current_page == 1;
 pend: function () {
 return this.current_page == this.pages;
 efont: function () {
 if (this.pages = 7) return false;
 return this.current_page 5
 ebehind: function () {
 if (this.pages = 7) return false;
 var nowAy = this.indexs;
 return nowAy[nowAy.length - 1] != this.pages;
 indexs: function () {
 var left = 1,
 right = this.pages,
 ar = [];
 if (this.pages = 7) {
 if (this.current_page 5 this.current_page this.pages -4）{
 left = Number(this.current_page) - 3;
 right = Number(this.current_page) + 3;
 } else {
 if (this.current_page = 5) {
 left = 1;
 right = 7;
 } else {
 right = this.pages;
 left = this.pages - 6;
 while (left = right) {
 ar.push(left);
 left++;
 return ar;
 methods: {
 jumpPage: function (id) {
 if (id = this.pages id = 1) {
 this.current_page = id;
 loadData(this.current_page - 1, size);
 lessPage: function () {
 this.current_page--;
 loadData(this.current_page - 1, size);
 addPage: function () {
 this.current_page++;
 loadData(this.current_page - 1, size);
}

使用说明：

直接拷贝即可使用，只需要修改总页数、当前页。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。