vue实现前端分页完整代码       这篇文章主要为大家详细介绍了vue实现前端分页完整代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

首先，做出来的效果如图所示，具体的Ajax请求数据可以写在点击函数中
分页效果算是比较费脑子的，里面计算有些麻烦，本文上完整代码，一起学习进步

“上一页”写两个li元素，如果已经是第一页，那么就禁止鼠标点击，如果不是就curr减减，并且可以点击 同理“下一页”也一样 puted计算得出

li v-if="cur 1" a v-on:click="cur--,pageClick()" 上一页 /a /li li v-if="cur==1" a 上一页 /a /li !--当前页背景色为蓝色-- li v-for="index in indexs" v-bind:class="{ 'active': cur == index}" a v-on:click="btnClick(index)" {{ index }} /a /li li v-if="cur all" a v-on:click="cur++,pageClick()" 下一页 /a /li li v-if="cur == all" a 下一页 /a /li li a 共 i {{all}} /i 页 /a /li /ul /div

难点就是IF嵌套语句

1、每次显示5个数据，如果大于3，范围从3到6，如果到达7，那么下边加2变成9，已经超过最大的范围值，所以最大范围到6
2、如果是大于6，那么最大值就是最大值，最小变成all-4
3、如果3以内，默认不跳动

var pageBar = new Vue({
 el: '.page-bar',
 data: {
 all: 8, //总页数
 cur: 1//当前页码
 watch: {
 cur: function(oldValue , newValue){
 console.log(arguments);
 methods: {
 btnClick: function(data){
 if(data != this.cur){
 this.cur = data;
 pageClick: function(){
 console.log('现在在'+this.cur+'页');
 computed: {
 indexs: function(){
 var left = 1;
 var right = this.all;
 var ar = [];
 if(this.all = 5){
 //这里最大范围从3到6，如果到达7，那么下边加2变成9，已经超过最大的范围值
 if(this.cur 3 this.cur this.all-1){
 //以4为参考基准，左面加2右边加2
 left = this.cur - 2
 right = this.cur + 2
 }else{
 if(this.cur =3){
 left = 1
 right = 5
 }else{
 right = this.all
 left = this.all -4
 while (left = right){
 ar.push(left)
 left ++
 console.log(ar);
 return ar
})

全部代码：

 !DOCTYPE html 
 html 
 head 
 meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/ 
 meta charset="utf-8" 
 title /title 
 meta name="keywords" content="" / 
 meta name="description" content="" / 
 script type="text/javascript" src="js/vue.min.js" /script 
 style 
.page-bar{
 margin:40px;
ul,li{
 margin: 0px;
 padding: 0px;
 list-style: none
.page-bar li:first-child a {
 margin-left: 0px
.page-bar a{
 border: 1px solid #ddd;
 text-decoration: none;
 position: relative;
 float: left;
 padding: 6px 12px;
 margin-left: -1px;
 line-height: 1.;
 color: #337ab7;
 cursor: pointer
.page-bar a:hover{
 background-color: #eee;
.page-bar a.banclick{
 cursor:not-allowed;
.page-bar .active a{
 color: #fff;
 cursor: default;
 background-color: #337ab7;
 border-color: #337ab7;
.page-bar i{
 font-style:normal;
 color: #d44950;
 margin: 0px 4px;
 font-size: 12px;
 /style 
 /head 
 body 
 div 
 li v-if="cur 1" a v-on:click="cur--,pageClick()" 上一页 /a /li 
 li v-if="cur==1" a 上一页 /a /li 
 !--当前页背景色为蓝色-- 
 li v-for="index in indexs" v-bind:class="{ 'active': cur == index}" 
 a v-on:click="btnClick(index)" {{ index }} /a 
 /li 
 li v-if="cur all" a v-on:click="cur++,pageClick()" 下一页 /a /li 
 li v-if="cur == all" a 下一页 /a /li 
 li a 共 i {{all}} /i 页 /a /li 
 /ul 
 /div 
 script type="text/javascript" 
var pageBar = new Vue({
 el: '.page-bar',
 data: {
 all: 8, //总页数
 cur: 1//当前页码
 watch: {
 cur: function(oldValue , newValue){
 console.log(arguments);
 methods: {
 btnClick: function(data){
 if(data != this.cur){
 this.cur = data;
 pageClick: function(){
 console.log('现在在'+this.cur+'页');
 computed: {
 indexs: function(){
 var left = 1;
 var right = this.all;
 var ar = [];
 if(this.all = 5){
 //这里最大范围从3到6，如果到达7，那么下边加2变成9，已经超过最大的范围值
 if(this.cur 3 this.cur this.all-1){
 //以4为参考基准，左面加2右边加2
 left = this.cur - 2
 right = this.cur + 2
 }else{
 if(this.cur =3){
 left = 1
 right = 5
 }else{
 right = this.all
 left = this.all -4
 while (left = right){
 ar.push(left)
 left ++
 console.log(ar);
 return ar
 /script 
 /body 
 /html 

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