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


声明标签：

 

           首页
           上一页
           下一页
           尾页
           当前页:{{thispage}}
           总页数:{{sumpage}}

 

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

//下一页
//当当前页如果小于总页数的，就可以进行下一页
xiayiye(){
    if (this.thispage1则可以上一页
shangyiye(){
    if (this.thispage>1){
        this.thispage--;
        this.updateFlied();
    }
},
//控制测试变量
updateFlied(){
    for (let i=0;i

 

 

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

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