关键词：
假设每页显示10条，一共100条，那么共10页，第一页显示1-10条数据，第二页显示11-20条数据...以此类推是不是有思路了
let productList = [];
export default {
data() {
return {
productList, //所有数据
totalPage: 1, // 统共页数，默认为1
currentPage: 1, //当前页数 ，默认为1
pageSize: 10, // 每页显示数量
currentPageData: [] //当前页显示内容
};
},
mounted() {
// 计算一共有几页
this.totalPage = Math.ceil(this.productList.length / this.pageSize);
// 计算得0时设置为1
this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
this.setCurrentPageData();
},
methods: {
// 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
setCurrentPageData() {
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
this.currentPageData = this.productList.slice(
begin,
end
);
},
//上一页
prevPage() {
console.log(this.currentPage);
if (this.currentPage == 1) return;
this.currentPage--;
this.setCurrentPageData();
},
// 下一页
nextPage() {
if (this.currentPage == this.totalPage)return ;
this.currentPage++;
this.setCurrentPageData();
}
}
};
htmljs实现分页展示的功能(代码片段)
html、js实现简单的分页功能逻辑效果部分代码逻辑简单的逻辑实现：初始的curPage是1、通过登录界面将curPage传入到list.html的QueryString中在后端的逻辑处理是：后端通过获取到的curPage、来进行分页查询获取前端传来的参数cu... 查看详情
前端vue项目实现单页打印功能
参考技术Avue-print-nb插件：这是用于打印，简单，快速，方便，轻便的指令包装。安装：在main.js全局引入注册（也可在组件引入）：在需要打印的页面元素上加上id值参考地址：https://www.npmjs.com/package/vue-print-nb二、批量打印 查看详情
vue开发实例（20）之实现登录功能(代码片段)
... Vue开发实例目录总索引◄上一篇【19】用户列表分页的实现►下一篇【21】待更新实现最简单的登录功能创建login.vue页面其中，点击确定后，会直接跳转到主页（确定按钮对应的方法，直接跳转到“/index”路由... 查看详情
vue开发实例（19）之用户列表分页的实现(代码片段)
引言Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！即使你并非前端开发人员，对前端的开发流程进行... 查看详情
基于vue.js的表格分页组件
...着用，或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能，我便在这里分享一下，大家自觉填坑咯。如需高大上的组件，可以移步Vue官方组件库：https://github.com/v 查看详情
对类vue的mvvm前端库的实现
关于实现MVVM，网上实在是太多了，本文为个人总结，结合源码以及一些别人的实现关于双向绑定vue数据劫持+订阅-发布ng脏值检查backbone.js订阅-发布(这个没有使用过，并不是主流的用法)双向绑定，从最基本的实现来说，就是在de... 查看详情
vue开发实例（20）之实现登录功能(代码片段)
引言Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！即使你并非前端开发人员，对前端的开发流程进行... 查看详情
vue.js开发实践：实现精巧的无限加载与分页功能
https://segmentfault.com/a/1190000005351971#articleHeader9 本篇文章是一篇Vue.js的教程，目标在于用一种常见的业务场景——分页/无限加载，帮助读者更好的理解Vue.js中的一些设计思想。与许多TodoList类的入门教程相比，更全面的展示使... 查看详情
使用datatables实现后台分页功能，减轻前端渲染压力
注意不同版本，参数名字及参数内容存在差异，具体可以参考https://datatables.net/upgrade/1.10-convert#Options 控制页面显示的参数：https://datatables.net/reference/option/ 前端传给后端的参数列表：后端传给前端的参数列表： 修改... 查看详情
vue中异步加载文章功能
...的速度，并且也能受用户的意愿加载更多的内容。1.后端实现：其实后端实现分页的功能十分 查看详情
网站前端_javascript-项目经验.纯javascript实现客户端的分页功能?
...,前端使用Html+CSS+原生JavaScript,项目功能模块要求必须纯JS实现,而此次的任务是为住院病例页面编写一个客户端分页功能.实现思路:1.基于客户端分页的前提是数据已经加载完毕,所以此功能模块必须等待数据加载完毕后再加载2.基... 查看详情
vue+element-ui前端项目一table表格并实现分页2
...ue3导航组件添加Table表格导航NavMenu.vue4element-ui表格组件并实现分页tableVue.vue4.1第一步：根据每页要显示的条数来设置，关联分页代码的分页条件4.2第二步：在表格后面添加上分页代码4.3第三步：定义变量4.4第四步：在methods中创... 查看详情
vue2.0+elementui+pagehelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页前言最近做了一些前端的项目，要对表格进行一些分页显示。表格分页的方法有很多，从宏观上来说分为物理分页和逻辑分页，由于逻辑分页（即前端分页）的做法是将数据全部缓存，然后分... 查看详情
用vue开发一个简单的答题应用
Vue之类的MVVM框架，能帮助我们用更少的代码实现复杂的业务。为了简单一点，开发计划分成三阶段：一，数据写死，实现基本的答题效果。支持多种题型。二，使用本地存储保存数据，支持题目录入的功能。三，使用数据库，... 查看详情
理解vue实现原理，实现一个简单的vue框架
参考:剖析Vue实现原理-如何实现双向绑定mvvmVue.js源码（1）：HelloWorld的背后Vue.js官方工程本文所有代码可以在git上找到。 其实对JS我研究不是太深，用过很多次，但只是实现功能就算了。最近JS实在是太火，从前... 查看详情
vue前端：几种搜索框功能实现(代码片段)
Vue前端：几种搜索框功能实现前言一、搜索框输入内容自动检索（1）检索到输入新的内容后，就自动向后端发送查找请求（即时搜索）（2）一次请求搜索到所有可能需要的数据，然后根据搜索... 查看详情
app开发-vue3+vant实现数据列表下拉分页功能(代码片段)
...量大的时候，我们一般都会采用分页的展示。怎么样实现分页？首先，前台我们要告诉后台，我们需要请求第几页数据，并且把每页展示的数据量告诉我。后台处理就比较简单了，因为是使用mysql的数据库&... 查看详情
app开发-vue3+vant实现数据列表下拉分页功能(代码片段)
...量大的时候，我们一般都会采用分页的展示。怎么样实现分页？首先，前台我们要告诉后台，我们需要请求第几页数据，并且把每页展示的数据量告诉我。后台处理就比较简单了，因为是使用mysql的数据库&... 查看详情