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信息}})
}

vue 实现分页数据展示相关推荐

Springboot+poi+实现导出导入Excle表格+Vue引入echarts数据展示
需求: 一. 数据库数据表导出Excle表格二. Excle数据导入数据库三. Vue引入Echarts数据展示工具: idea 数据库: mysql 框架:Springboot 准备工作: 1 ...
使用Vue指令实现数据展示，小米商城商品展示
使用Vue指令实现数据展示,小米商城商品展示涉及知识: (1)插值绑定 (2)实例创建 (3)常用指令效果展示代码代码gitee下载:https://gitee.com/yuhaowen/vf ...
19.2、Javaweb案例_Servlet代码抽取优化分页数据redis缓存优化分页数据展示
优化Servlet 目的减少Servlet的数量,现在是一个功能一个Servlet,将其优化为一个模块一个Servlet,相当于在数据库中一张表对应一个Servlet,在Servlet中提供不同的方 ...
黑马旅游网——分页数据展示（难点）和旅游线路名称查询
狗都能看懂的代码分析!!!,虽然这一块比较绕但是我还是决定让狗都能看懂期望效果: 数据展示功能: 当我们点击分页展示栏中任意一页时,就会展示相应板块(cid)的数据如我们点击国内游(cid=5), ...
vue+echarts实现数据展示大屏
简单介绍一个数据展示大屏.适用于中小型项目展示,只做学习交流. 技术栈前端:vue+echarts+axios+vue-router+less 后台:node+koa2+websocket 开发I ...
Vue格式化Json数据展示
有时候我们在展示Json数据时,希望能按照Json的格式来展示,这样比较清晰明了.在Vue中可以直接使用标签来实现. <pre>{{ JSON.stringify(obj, null, ...
vue 大屏数据展示组件
http://datav.jiaminghi.com/guide/ 事例:
vue列表类型数据展示图片
方式一: <el-table-column type="expand"><template slot-scope="props">< ...
Vue.js-Day01-AM【第一次学习-安装、基础使用(引入方式)、数据展示、指令介绍(v-html、v-text、v-bind、v-if、v-for】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.讲在前面课程内容实训课内容 2.Vue.js介绍 2.1.安装开发环境版本介绍 2.2.基础使用 ...

vue 实现分页数据展示

vue 实现分页数据展示相关推荐

最新文章

热门文章