分页,是在业务中经常要用到,为了节省用户流量和提升用户体验

讲一下思路:

首先是定义页号currentPage 和 页大小pagesize,用一个数组保存总数据;

用一个计算属性page_arrs,作用是 让页面展示的是我们所需要的页面

而我们在page_arrs中要分割原数组,用一个slice()方法进行分割;

在控件button上绑定点击方法,对页号currentPage进行修改,从而修改整个页面展示

具体看以下代码

代码:

data () {
return {
arrs : [
{name:'Otto',id:1},
{name:'Jacob',id:2},
{name:'Larry',id:3},
{name:'Tim',id:4},
{name:'Tom',id:5},
{name:'Jack',id:6},
{name:'Otto',id:1},
{name:'Jacob',id:2},
{name:'Larry',id:3},
{name:'Tim',id:4},
{name:'Tom',id:5},
{name:'Jack',id:6},
{name:'Otto',id:1},
{name:'Jacob',id:2},
{name:'Larry',id:3},
{name:'Tim',id:4},
{name:'Tom',id:5},
{name:'Jack',id:6}
],
currentPage : 1,//当前页号
pagesize :10 //每页大小
}
}
<table class="table table-hover ">
<thead>
<tr>
  <th class="number">序号</th>
  <th >题目</th>
   <th class="del">删除</th>
</tr>
</thead>
<tbody>
<tr class="tr" v-for="(item,index) in page_arrs" :key="index">
<th>{{index+1}}</th>
<td>{{item.name}}</td>
<td><a href="">删除</a></td>
</tr>
</tbody>
</table>
<div class="page">
<button class="btn btn-default" type="submit" @click="primaryPage">首页</button>
<button class="btn btn-default" type="submit" @click="prePage">上页</button>
<button class="btn btn-default" type="submit">{{current_page}}/{{Math.ceil(arrs.length/pagesize)}}</button>
<button class="btn btn-default" type="submit" @click="nextPage">下页</button>
<button class="btn btn-default" type="submit" @click="lastPage">尾页</button>
</div>
computed:{
page_arrs(){
let {currentPage,pagesize} = this
return this.arrs.slice((currentPage-1)*pagesize,currentPage*pagesize)
},
current_page(){
return this.currentPage
}
},
methods: {
primaryPage(){
this.currentPage = 1
},
prePage(){
if(this.currentPage == 1){
return
}
this.currentPage = this.currentPage - 1
},
nextPage(){
if(this.currentPage == Math.ceil(this.arrs.length/this.pagesize)){
return
}
this.currentPage = this.currentPage + 1
},
lastPage(){
this.currentPage = Math.ceil(this.arrs.length/this.pagesize)
}
},

Vue 实现分页效果的更多相关文章

  1. Vue实际中的应用开发【分页效果与购物车】

    作者 | Jeskson 来源 | 达达前端小酒馆 分页组件 首先来创建项目: 分页组件,做项目不要写动手写代码,要想想业务逻辑,怎么写,如何写才是最好的呈现方式,做项目不急,要先想好整体的框架,从底 ...

  2. 使用vue完成一个分页效果

    基于 element-ui 分页组件实现分页效果 效果如下: 使用说明: 0.首先在头部引入需要的外部文件 1.从element官方网页中复制想要的组件代码直接放入body中 2.编写逻辑代码 3.完 ...

  3. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  4. 基于vue2.0实现仿百度前端分页效果(二)

    前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...

  5. 基于vue2.0实现仿百度前端分页效果(一)

    前言 最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的boots ...

  6. Vue 实现分页+输入框关键字筛选

    分页的实现(Vue+Element)+输入框关键字筛选 1.这里用的是Element 自带的分页组件 <template> <div class="sales-table& ...

  7. 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  8. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  9. ViewPager+GridView实现首页导航栏布局分页效果

    如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

随机推荐

  1. 「Luogu P5368 [PKUSC2018]真实排名」

    PKUSC签到题 题目大意 给出一个长度为 \(N\) 的序列,序列中有 \(K\) 个数会乘二,对于每个数计算在乘二后大于等于这个数的个数与乘二前没有发生变化的方案数. 分析 思路很清晰,可以将答案 ...

  2. nyoj 11

    水题... #include <stdio.h> #include <algorithm> #include <iostream> int main() { int ...

  3. linux磁盘空间挂载

    (1)查看磁盘空间 df -hl (3)查看硬盘及分区信息 fdisk -l (4)格式化新分区 mkfs.ext3 /dev/xvdb (5)将磁盘挂载在/www/wwwroot/default目录 ...

  4. 女神说拍了一套写真集想弄成素描画?很简单,用Python就行了!

    素描作为一种近乎完美的表现手法有其独特的魅力,随着数字技术的发展,素描早已不再是专业绘画师的专利,今天这篇文章就来讲一讲如何使用python批量获取小姐姐素描画像.文章共分两部分: 第一部分介绍两种使 ...

  5. DVWA靶机的命令执行漏洞

    之前在打攻防世界的时候出现过类似的题目,这里再重温一下 (靶机一共低中高三个安全等级,这里只演示低中等级) (1)Security:low 根据提示让我们输入地址ping一下,之后返回以下内容,可以判 ...

  6. nginx 的location的匹配顺序

    匹配规则 匹配顺序 示例 [root@python vhast]# cat test.conf server { server_name haha.com; #listen 8080; rewrite ...

  7. keil遇到hardfault时原因的查找

    当硬件仿真遇到hardfault会进入响应的中断软件陷阱中void HardFault_Handler(void),此时通过view-registers中的 1 如果STACK=MSP,则查看SP的堆 ...

  8. Linux软Raid--mdadm命令

    mdadm:为软RAID提供管理界面,RAID设备可命名为/dev/md0./dev/md1./dev/md2./dev/md3等 命令的语法格式:mdadm[mode] <raiddevice ...

  9. Java开发神器Lombok的使用与原理

    在面向对象编程中必不可少需要在代码中定义对象模型,而在基于Java的业务平台开发实践中尤其如此.相信大家在平时开发中也深有感触,本来是没有多少代码开发量的,但是因为定义的业务模型对象比较多,而需要重复 ...

  10. SLT学习——leafes tree扩展 【文艺平衡树】

    这是一个全新的数据结构 md,别看这篇文章了,这篇已经废了. 百折不饶,再交一次,更新复杂度证明 这里是HYF,蒟蒻一只,最近因某些原因开始学数据结构了,然后就写了这篇题解. 下面给大家介绍一个全新的 ...