使用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

时间： 2024-10-09 13:11:44

使用vue完成一个分页效果的相关文章

【git】--------------vue+element-ui实现分页效果-------------【劉】

当从后台请求到大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.这次使用的是vue2.0+element-ui实现一个分页功能,element-ui中给我提供了一个Pagination 分页,使用Pagination可以快速完成分页功能 效果展示 代码附录:template <div class="deit"> <div class="crumbs"> &l

vue+element-UI实现分页效果

当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div class="deit"> <div class="crumbs"> &l

非常不错的一个JS分页效果代码

这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原理还是相通的,感兴趣的朋友做个参考吧. 例子,js分页效果代码. <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

Python中使用flask_sqlalchemy实现分页效果方法详解

Flask-sqlalchemy是关于flask一个针对数据库管理的.本文我们将采用一个关于员工显示例子,为大家展示分页效果的实现,一起来看看吧,希望对大家学习python有所帮助. 首先,我们创建SQLALCHEMY对像db. 1 from flask import Flask, render_template,request 2 from flask_sqlalchemy import SQLAlchemy 5 6 app = Flask(__name__,static_url_path='

thinkphp自定义分页效果

TP自带了一个分页函数,挺方便使用的. 下面是我的使用方法: 1 /*****************分页显示start*************************/ 2 $arr_page=$this->page($user,1); 3 $show=$arr_page['show']; 4 $Page=$arr_page['Page']; 5 $article = $user->order('now')->limit($Page->firstRow.','.$Page-&g

Ajax实现phpcms列表分页效果

phpcms列表页ajax分页效果: 1.在  /phpcms/modules/模块下加多一个ajaxlist文件夹,在其文件夹下新建一个index.php,内容如下: <?php defined('IN_PHPCMS') or exit('No permission resources.'); //模型缓存路径 define('CACHE_MODEL_PATH',CACHE_PATH.'caches_model'.DIRECTORY_SEPARATOR.'caches_data'.DIRECT

存储过程实现真分页效果

最近, 有几个接口是列表页面, 以前的后台做的是假分页, 就是数据库的数据都返回了, 然后让前端和移动端自己做假分页, 出于对数据库优化的考虑, 决定使用存储过程实现.项目使用.net mvc webapi model代码 #region 教学活动观摩列表 public class EduObAndVideoListPara { public string UserCode { set; get; } public string KindCode { set; get; } public Pag

PageHelper+Bootstrap Paginator实现分页效果

最近需要做一个分页,找了挺多的前端分页效果,发现Bootstrap Paginator分页插件效果不错,而我页面也是用BootStrap做的响应式页面,就做了实现一个简单的分页效果. PageHelper地址:https://github.com/pagehelper/Mybatis-PageHelper Bootstrap Paginator:https://github.com/lyonlai/bootstrap-paginator 在SpringBoot+Mybatis做分页 1.首先添加

PHP如何实现网页分页效果

在PHP网站之说,有很多需要实现分页效果,主要是用于阅读小说. 功能实现如下: 使用sql查询进行分页时,需要调用几个函数,具体见脚本: 1.pager.class.php <?php                 class pager {                 public $sql; //SQL查询语句                 public $datanum; //查询所有的数据总记录数                 public $page_size; //每页显示