vue分页

学习框架的目的是让我们开发更为便捷,相对于用原生或是jQuery来写分页,vue更为简单快捷。之前写过真分页(后端写好分页)的文章,现在来写假分页(前端自己写分页)的文章。废话不多说,直接上代码。
html代码:

<a class="prev" href="" @click.prevent="prev">&lt;&lt;</a>
<span v-for="index in page" :class="newPage == index ?'current':''" @click.prevent="new1(index)">
	{{index}}
</span>
<a class="next" href="" @click.prevent="next">&gt;&gt;</a>

注:prev上一页,next下一页,span 就是显示的页数
js代码:

var app = new Vue({
  el: '#app',
  data: {
    exams: [],
    examAlls: [],
    
    page:"",//总页数
    pageNumber:1,//每页显示条数
    newPage:1,//当前所在页
  },
  mounted() {   //mounted 钩子函数  一般用来向后端发起请求,拿到数据后做一些业务处理。该函数在模版渲染完成后才被调用。DOM操作一般是在mounted钩子函数中进行。
  	//axios获取
      const that =this ;
      axios({
        url:'xxxxx/AppServe/ExamRingServlet?method=all',
        method:'post',
        headers:{//请求头设置为表单提交的请求头
          'Content-Type':"application/x-www-form-urlencoded"
        },
        /*data:params,*/
      })
      .then(function (data) {  //成功时的回调函数,data为后端返回的httprespons对象
        // do something   # 接上,对象内把数据也放在了data内,所以用data.data取值
        //console.log(data.data);
        that.examAlls = data.data;   //获取的数据
        that.page = Math.ceil(that.examAlls.length/that.pageNumber);  //计算总页数
        that.exams=that.examAlls.slice((that.newPage-1)*that.pageNumber,that.newPage*that.pageNumber);  //将获取到的数组进行切割,按照当前页数和每页条数
      })
      .catch(function (data) {  // 失败时的回调函数
        // do something
        //alert("获取数据失败")
        console.log(data)
      })
  },
  methods:{   //methods 事件方法执行  有一定的触发条件,如click等。
    /*分页*/
   	prev() {
	   	if(this.newPage <= 1){   //判断是否是第一页
	   		this.newPage = 1;
	   		alert("前面没有了");
	   	}else{
	   		this.newPage--;
	   		this.exams=this.examAlls.slice((this.newPage-1)*this.pageNumber,this.newPage*this.pageNumber); //将获取到的数组进行切割,按照当前页数和每页条数
	   	}
   	},
   	next() {
	   	if(this.newPage >= this.page){   //判断是否是最后一页
	   		this.newPage = this.page;
	   		alert("后面没有了");
	   	}else{
	   		this.newPage++;
	   		this.exams=this.examAlls.slice((this.newPage-1)*this.pageNumber,this.newPage*this.pageNumber); //将获取到的数组进行切割,按照当前页数和每页条数
	   	}
   	},
   	new1(index){   //点击中间的页数,跳转到对应页
   		this.newPage = index;     //让当前页等于点击的index
		this.exams=this.examAlls.slice((this.newPage-1)*this.pageNumber,this.newPage*this.pageNumber); //将获取到的数组进行切割,按照当前页数和每页条数
   	},
  }
})

使用了layui,所以没写样式,请自行加上样式。因为本次开发中页数普遍少,暂时没有写页数省略号,后期补上。

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读