VUE前端娱乐版分页

在自己的ceshi demo中

分页必须有以下元素：
当前页数：thispage，用来控制第几页
总页数：sumpage，用来查询总共要分多少页
页码：showsize，用来控制需要分多少页，就是一页显示多少条的意思

声明属性：
data: {
arr: [],
//当前页
thispage:1,
//总页数
sumpage:0,
//一页显示多少条
showSize:2,
//测试变量
textflied:0
},

一.求总页数sumpage
访问后台后得到一个对象，通过该对象的长度和根据自己的页码需求进行计算总页数

下面是访问后台的一个方法，查询全部数据后，返回一个value.data对象，然后调用求总页数的方法

//获得所有数据
findAll(){
    let vm=this;
    axios.get("http://192.168.3.11:8080/findAll").then((value) => {
        //获取总页数数量
        //通过访问后端获取到一个对象，然后调用求总页数方法
        vm.sumpage=vm.qiuzongye(value.data.length,this.showSize);
        console.log(vm.sumpage);
        this.arr = value.data;
        for (let i = 0; i < this.arr.length; i++) {
            this.arr[i].boll = false;
        }
    });
},
//总页数计算方法(第1个参数是对象总数量，第2个参数是需要分多少条数据)
qiuzongye(sumdate,showsize){
    //如果可以被整除就直接除
    if (sumdate%showsize==0){
        console.log(showsize);
        return sumdate/showsize;
    }else {
        //如果多出一页则取整+1
        return parseInt(sumdate/showsize)+1
    }
},

二.测试上一页和下一页是否可以+1或则-1

声明标签：

<div>
首页
上一页
下一页
尾页
当前页:{{thispage}}
总页数:{{sumpage}}
</div>

测试上一页下一页的值，然后调用测试变量的方法：

//下一页
//当当前页如果小于总页数的，就可以进行下一页
xiayiye(){
    if (this.thispage<this.sumpage){
        this.thispage++;
        this.updateFlied();
    }
},
//上一页
//当当前页如果>1则可以上一页
shangyiye(){
    if (this.thispage>1){
        this.thispage--;
        this.updateFlied();
    }
},
//控制测试变量
updateFlied(){
    for (let i=0;i<this.thispage;i++){
        this.textflied=i*this.showSize;
    }
},
//首页就让当前页回到1，并且调用控制变量方法
shouye(){
    this.thispage=1;
    this.updateFlied();
},
//尾页就让当前页等于总页码即可，并且调用控制变量方法
weiye(){
    this.thispage=this.sumpage;
    this.updateFlied();
}

控制变量的方法只要是可以让循环的是否，进行v-if判断

v-if是如果存在的意思，判断条件当对象下标<(控制变量+显示页数)并且对象下标要大于获得等于控制变量，才会显示相应的数据

<tr v-for="(item,index) in arr" v-if="index<(textflied+showSize)&&index>=textflied">

VUE前端娱乐版分页

猜你喜欢