vue 实现分页数据展示

效果如下： 

 精华原理总结：
后台实现分页获取，前端实现点击切换页面按钮，重新请求分页数据进行展示

<div class="show_car ">
<!-- 对需要展示的列表数据carList进行循环，实现多个数据信息展示，@click绑定点击事件，点击数据信息内容，触发两个函数 getCarDetailImg以及 Myopen函数，触发多个函数，使用";"分隔-->
   <div class="car horizon" v-for="item in carLists" @click="getCarDetailImg(item.id,item.name);Myopen('carBuyDetail')">
    <!-- img 动态绑定显示图片-->
    <img style="margin-right:22px" v-bind:src="item.photo"></img>
    <!-- {{item.name}} 显示请求到的数据信息 -->
    <p  class="name">{{item.name}}</p>
    <div>
     <p class="info" >{{item.subName}}</p>
    </div>
    <div>
     <p class="horizon fixed">一口价</p>
     <p class="horizon price" >{{item.price}}</p>
     <p class="horizon price">元</p>
     <p class="horizon condition" >{{item.carConText}}</p>
    </div>
   </div>
   <!-- 分页的点击事件 使用@click绑定点击事件，点击触发getCarList函数，请求新的数据-->
   <div class="page_area">
    <!--使用变量page记录当前页面-->
    <p class="horizon" @click="getCarList(page-1)">上一页</p>
    <p class="horizon">第{{page}}页</p>
    <p class="horizon" @click="getCarList(page+1)"> 下一页</p>
   </div>
</div>

附css代码

.car_buy {
    width:1800px;
	height:588px;
	background:rgba(247,247,247,1);
	position:relative;
	margin:0 auto; 
}

.car_buy .title{
	position:absolute;
	margin-top:82px;
	margin-left:347px;
	font-size:30px;
	font-family:FontName;
	color:rgba(51,51,51,1);
	line-height:35px;
}
.car_buy .show_car{
	position:absolute;
	margin-left:347px;
	margin-top:153px;
}
.car_buy .car{
	height:320px;
	width:260px;
	padding-right:22px;
}

.car_buy .car .name{
	width:222px;
	height:20px;
	font-size:17px;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(51,51,51,1);
	line-height:20px;
}

.car_buy .car .info{
	font-size:14px;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(153,153,153,1);
	line-height:16px;
}

.car_buy .car .box{
	text-align: -moz-center !important;
	text-align: center;
	vertical-align: middle;
}

.car_buy .car .fixed{
	vertical-align: middle;
	font-size:12px;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(255,70,6,1);
	line-height:18px;
}

.car_buy .car .price{
	padding-left:2px;
	vertical-align: middle;
	font-size:18px;
	font-family:PingFangSC-Medium,PingFang SC;
	font-weight:500;
	color:rgba(255,70,6,1);
	line-height:8px;	
}

.car_buy .car .condition{
	position:absolute;
	margin-left:226px;
	vertical-align: middle;
	text-align: center;
	width:25px;
	height:18px;
	border:2px solid rgba(255,70,6,1);
	border-radius:2px;
	font-size:10px;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(255,70,6,1);
	line-height:18px;
}

.car_buy .car img{
	height:195px;
	width:260px;
}
.car_buy .page_area p{	
	padding:20px;
}
.car_buy .page_area{
	margin-left:380px;
	margin-top:340px;
}

javascript

date中声明使用到的变量信息

data:{  
    'carLists':[],//carLists 初始化为数组型数据
    'page':1 //page初值为1
}

页面初始化时需要有数据信息，第一次getCarList请求可放在vue生命周期函数created中

created:function(){
  this.getCarList(this.page);
}

获取数据函数getCarList，放在methods中

getCarList(page){
  if(page == 0){ //page等于0，表示已是第一页，提示用户已到第一页
    alert("已到第一页！")
    return;
  }
  var self = this;
  axios.get('请求参数',{
        params: {
          page: page, //后台支持必要参数，page请求页
          pageSize: 4//后台支持必要参数,pageSize 请求数据量
        },
        headers:{ //其他头部参数
          token:self.vistorToken
        }
        })
   .then(function (response) {//请求成功
        console.log(response);
        if(response.data.data.length == 0){//请求数据长度为0，表示没有数据，提示用户到最后一页
          alert("已到最后一页！")
          return;
         }
         self.page = page;//无其他情况，表示请求成功，更新记录页面的page参数
         self.carLists = response.data.data; //更新carLists信息
    }
 })
}