使用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":"投融资"}]
}

转载于:https://www.cnblogs.com/wuhefeng/p/9991616.html

使用vue完成一个分页效果相关推荐

vue+Element-ui实现分页效果
当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui ...
一个分页效果ruby版可作为面试题吧
#coding:utf-8 total_pages=11 current_page=10 a=(1..total_pages).to_a #<div class="page_box&q ...
原生JS实现分页效果
做开发久了,会越来越依赖框架,毕竟利用框架可以快速的完成工作任务,如常见的分页效果,只需要与后端配合,由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能,就可以轻松的实现分页效果,那如果在不 ...
vue 实现无限轮播_用vue写一个轮播图效果
轮播图在网站中几乎无处不在,占用地方少,交互性好.今天就来聊聊如何用vue实现一个轮播效果. 一.原理在轮播图数组dataList中,定义一个变量currentIndex = 0表示第一张图片,默认 ...
vue实现一个星级打分效果_Vue实现星级评价效果实例详解
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) 初始Star.vue {{ score }} export default { name: 'Star', pr ...
如何用php实现分页效果
分页效果在网页中是常见的,可是怎样才能实现分页呢,今天做了两种方法来实现一下分页的效果首先,我们需要准备在数据库里面准备一个表,并且插入数据,这些都是必需的前提工作了,不多说,如图所示(库名为jer ...
用Vue撸一个『A-Z字母滑动检索菜单』
最近用vue仿写途牛旅行APP 遇到了这样的城市列表选择页面,花了些时间,用Vue实现了一下并让它体验的接近安卓/IOS 原生组件很多地方都会有这样的侧边栏字母列表菜单,可以滑动实现内容列表联动. ...
黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果一.总结一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
android 之ListView分页效果以及从网络上加载数据一系列的综合运用
数据分页策略: <1>:用多少查多少 <2>:全部查询出来,再进行分页处理数据分页的有关算法: (1):起始索引值 = (当前页-1)*每页显示的记录数 (2):结束索引值 ...

使用vue完成一个分页效果

使用vue完成一个分页效果相关推荐

最新文章

热门文章