使用vue完成一个分页效果
基于 element-ui 分页组件实现分页效果
效果如下：
使用说明：
0.首先在头部引入需要的外部文件
1.从element官方网页中复制想要的组件代码直接放入body中
2.编写逻辑代码
3.完成列表的数据渲染
1.html代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="js/vue.js"></script>
7 <script src="js/jquery-1.8.2.min.js"></script>
8 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
9 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
10 </head>
11
12
13 <body>
14 <div id="app">
15 <!--完成页面布局-->
16 <div v-for="val in ha">
17 <div class="con" style="">
18 <div class="center-left-body bg">
19 <div class="img-box1">
20 <img :src="val.img1" alt="" class="img-h b-img">
21 </div>
22 <p><a href="detail-1.html" class="center-left-body-a1">{{val.h1}}</a></p>
23 <p><a href="detail-1.html" class="center-left-body-a2">{{val.p1}}</a></p>
24 <p class="mb-p">{{val.math}}</p>
25 <img :src="val.img2" alt="" class="mb-img">
26 <p ><a href="" class="tab-mt">{{val.a1}}</a><a href="" class="tab-mt">{{val.a2}}</a></p>
27 </div>
28 </div>
29 </div>
30
31 <!-- element 分页组件-->
32 <div class="">
40 <el-pagination
41 background
42 @current-change="handleCurrentChange"
43 :current-page="currentPage"
44 :page-size="3"
45 layout="prev, pager, next"
46 :total="100">
47 </el-pagination>
48 </div>
49
50 </div>
51 </body>
2.css代码：
<style>
a{text-decoration: none;color: #795da3;}
a:hover{color: red}
.center-left-body{width: 820px;height: 127px;border-top:1px solid #ddd;margin-top: -15px;padding: 21px 0;margin-bottom: 20px;}
.center-left-body img:nth-child(1){width: 190px;height: 127px;float: left;}
.center-left-body-a1{float: left;margin-left: 21px;font-size: 18px;line-height: 26px;color: #333;margin-top: -15px;}
.center-left-body-a2{float: left;margin-left: 210px;font-size: 16px;color: #595959;margin-top: -95px;word-wrap:break-word;}
.mb-p{float: left;margin-top: -20px;margin-left: 210px;color:#999;}
.mb-img{float: left;margin-top: -20px;margin-left: 15px;}
.tab-mt{margin-right: -30px;margin-left: 50px;margin-top: -20px;float: left;}
.bor-no{border: none;}
.bg:hover{background-color:#efefef;} </style>
3.js代码
<script>
var vm = new Vue({
el:'#app',
data:{
ha:[],
currentPage:1,
},
mounted:function(){
this.getData()
this.handleCurrentChange()
},
methods:{
getData(){
$.ajax({
type:'get',
url:'ha.json',
dataType:'JSON',
success:function(data){
vm.ha=data.ha
}
})
},
handleCurrentChange(val){
var page = 1
if(val == undefined){
page=1
}else{
page = val
}
var _this = this $.ajax({
type:'post',
url:'ha.json',
dataType:'JSON',
success:function(data){
console.log(data)
var arr = []
if(page==1){
for(var i = 0;i<3;i++){
arr = arr.concat(data.ha[i])
}
_this.ha = arr
}else{
for(i=(page-1)*3;i<page*3;i++){
arr = arr.concat(data.ha[i])
}
_this.ha = arr
} }
}) },
}
})
</script>
4.json数据：
ha.json
{
"ha":[
{
"img1":"img-index/20181112_1542027463929.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181107_1541569944473.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181107_1541569944473.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542010837701.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181113_1542076349985.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542027463929.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181107_1541569944473.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542027463929.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181107_1541569944473.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181107_1541569944473.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542010837701.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181113_1542076349985.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542027463929.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181107_1541569944473.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542027463929.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542010837701.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542027463929.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542010837701.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542027463929.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542027463929.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
},
{
"img1":"img-index/20181112_1542027463929.jpg",
"h1":"夫妻店再升级 20万小店接入零售通参加双11",
"p1":"据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。",
"math":"2018-11-10 16:32",
"img2":"img-2/ico_pindao_dingyue.png",
"a1":"企业服务",
"a2":"投融资"
}
]
}
使用vue完成一个分页效果的更多相关文章
- vue+Element-ui实现分页效果
当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui ...
- Vue 实现一个分页组件
实现分页组件要分三个部分 样式,逻辑,和引用 首先新建一个vue文件用来承载组件内容 第一步:构建样式 <template> <nav> <ul class=" ...
- 基于vue2.0实现仿百度前端分页效果（二）
前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...
- Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果
你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...
- Vue实际中的应用开发【分页效果与购物车】
作者 | Jeskson 来源 | 达达前端小酒馆 分页组件 首先来创建项目: 分页组件,做项目不要写动手写代码,要想想业务逻辑,怎么写,如何写才是最好的呈现方式,做项目不急,要先想好整体的框架,从底 ...
- 非常不错的一个JS分页效果代码
这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...
- 基于vue2.0实现仿百度前端分页效果（一）
前言 最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的boots ...
- ViewPager+GridView实现首页导航栏布局分页效果
如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...
- thinkphp自定义分页效果
TP自带了一个分页函数,挺方便使用的. 下面是我的使用方法: /*****************分页显示start*************************/ $arr_page=$this ...
随机推荐
- 【BZOJ2946&SPOJ1812】公共串（后缀自动机）
题意:给出几个由小写字母构成的单词,求它们最长的公共子串的长度. 单词的数量<=5,单词的长度至少为1,最大为2000. 思路: #include<bits/stdc++.h> us ...
- [CSP-S模拟测试]:Walk（BFS+建边）
题目描述 在比特镇一共有$n$个街区,编号依次为$1$到$n$,它们之间通过若干条单向道路连接. 比特镇的交通系统极具特色,除了$m$条单向道路之外,每个街区还有一个编码${val}_i$,不同街区可 ...
- 点击按钮后URL呗改变
这里留个坑,Button默认类型是submit.没有写类型的,可能会导致触发Url改变.要么写类型,要么在按钮对应的Js方法里return.
- 2019-2020-1 20175223 《信息安全系统设计基础》MyOD
目录 一.要求 二.设计流程 1. 需求分析 2. 概要设计 伪代码 3. 详细设计 main.c tans_0x.c tans_pr.c tansp.h 三.编写Makefile,并制作动.静态库 ...
- 解决Mac下使用root 权限依旧无法读写文件的问题
当时在学习selenium的时候,需要配合使用chromedriver 和phantomjs 进行浏览器的自动化测试.. chromedriver下载结束后.无法移动到/user/bin下面 会提示权 ...
- Cocos2d 之FlyBird开发---GameScore类
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 这个类主要实现的是,显示历次成绩中的最好成绩.当然我写的这个很简洁,还可以写的更加的丰富.下面贴上代码: GameScore.h #ifn ...
- XGBoost的推导和说明
一.简介 XGBoost是“Extreme Gradient Boosting”的缩写,其中“Gradient Boosting”一词在论文Greedy Function Approximation: ...
- undefined,null,var 0 = {},var s = '',的区别
undefined:不清楚变量的类型:var m; null:知道该变量是对象的引用,但是地址为空 var o = {};这是一个对象,有指向地址,但是值为空 var 0 = '';这是一个空的字符串
- 【题解】图的m着色问题
题目背景 给定无向连通图G和m种不同的颜色.用这些颜色为图G的各顶点着色,每个顶点着一种颜色.如果有一种着色法使G中每条边的2个顶点着不同颜色,则称这个图是m可着色的.图的m着色问题是对于给定图G和m ...
- Java中的动态代理（jdk和cglib）
JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类 ...