Vue 之 在当前页面的实现分页效果

目录

    • 场景
    • 实现

在这里插入图片描述

场景

假设,我们现在有这么一个需求:
上述图片的空白内容是活动的,由下面的两个按钮控制上一页、下一页;我们应该可以怎么去实现?

实现

思路:
其实这个问题,我们仿照其他的UI框架应该也可以获取大致思路,例如:element-ui;

可以将空白内容作为一个table的某一页数据,然后点击底部的分页组件的上一页或者下一页,来做到数据的切页效果。
这里使用vue element admin 中的一个综合table来看下效果图
在这里插入图片描述

这下有没有感觉顿时思路就来了
定义变量,当前页码currentPage、每页数据数量pageSize,总数据源列表dataList
点击按钮切换页码,监听页码的变化获取到当前页的数据,从而渲染到页面上。

注意点,这里建议使用计算属性computed,而不是监听属性watch,为什么?这是因为计算属性的一个特性:计算属性相比监听而言,计算属性具有缓存特性,直白的说,计算属性的依赖(也就是计算属性中所用到的变量)如果不变,那么计算属性不会被再次调用,从而进一步的提高性能。

代码如下:

<template><div><!-- 数据列表 --><ul><li v-for="item in currentPageData" :key="item.id">{{ item.content }}</li></ul><!-- 分页控件 --><button @click="prevPage" :disabled="currentPage === 1">上一页</button><button @click="nextPage" :disabled="currentPage === totalPages">下一页</button></div>
</template><script>
export default {data() {return {currentPage: 1,pageSize: 10,dataList: [], // 假设这是从服务器获取的数据列表};},computed: {totalPages() {return Math.ceil(this.dataList.length / this.pageSize);},currentPageData() {let start = (this.currentPage - 1) * this.pageSize;let end = start + this.pageSize;return this.dataList.slice(start, end);},},methods: {nextPage() {if (this.currentPage < this.totalPages) {this.currentPage++;}},prevPage() {if (this.currentPage > 1) {this.currentPage--;}},},
};
</script>


完结。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/831068.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

接收区块链的CCF会议--APSEC 2024 截止7.13 附录用率

会议名称&#xff1a;APSEC&#xff08;Asia-Pacific Software Engineering Conference&#xff09; CCF等级&#xff1a;CCF C类学术会议 类别&#xff1a;软件工程/系统软件/程序设计语言 录用率&#xff1a;2023年&#xff0c;90 submissions were recommended for accep…

算法二:DOM - 将DOM节点元素转换成JSON字符串

题目&#xff1a; 将DOM节点元素转换成JSON的格式 例如 <div class"root"><div class"child1"><p></p></div><span></span><div><div><p></p></div></div><p></…

Web前端开发之CSS_2

关系选择器CSS盒子模型弹性盒子模型文档流浮动清除浮动定位 1. 关系选择器 1.1 后代选择器 E F{} 选择所有被 E 元素包含的 F 元素&#xff0c;中间用空格隔开 <ul> <li>后代列表1</li> <div> <ol> <li>后代列表2</li> </ol>…

力扣刷题第0天:只出现一次的数字

目录 第一部分:题目描述 ​第二部分:题目分析 第三部分:解决方法 3.1思路1: 双指针暴力求解 3.2 思路2&#xff1a;异或运算 第四部分:总结收获 第一部分:题目描述 第二部分:题目分析 由图片分析可得&#xff0c;该题目对算法时间复杂度有一定的要求时间复杂度为O(N)&a…

知乎广告投放怎么操作?如何开通知乎广告账户?

知乎作为一个汇聚知识精英与行业领袖的问答社区&#xff0c;其独特的平台属性和高质量的用户基础&#xff0c;使之成为品牌广告投放不可忽视的一片蓝海。云衔科技通过专业化的广告开户及代运营服务&#xff0c;助力企业精准触达目标人群&#xff0c;实现品牌传播与商业目标的双…

【源码阅读】Golang中的go-sql-driver库源码探究

文章目录 前言一、go-sql-driver/mysql1、驱动注册&#xff1a;sql.Register2、驱动实现&#xff1a;MysqlDriver3、RegisterDialContext 二、总结 前言 在上篇文章中我们知道&#xff0c;database/sql只是提供了驱动相关的接口&#xff0c;并没有相关的具体实现&#xff0c;具…

2024五一杯数学建模C题思路分享 - 煤矿深部开采冲击地压危险预测

文章目录 1 赛题选题分析 2 解题思路2.1 问题重述2.2 第一问完整思路2.2 二、三问思路更新 3 最新思路更新 1 赛题 C题 煤矿深部开采冲击地压危险预测 煤炭是中国的主要能源和重要的工业原料。然而&#xff0c;随着开采深度的增加&#xff0c;地应力增大&#xff0c;井下煤岩动…

键盘更新计划

作为 IT 搬砖人&#xff0c;一直都认为键盘没有什么太大关系。 每次都是公司发什么用什么。 但随着用几年后&#xff0c;发现现在的键盘经常出问题&#xff0c;比如说调节音量的时候通常莫名其妙的卡死&#xff0c;要不就是最大音量要不就是最小音量。 按键 M 不知道什么原因…

Java | Leetcode Java题解之第60题排列序列

题目&#xff1a; 题解&#xff1a; class Solution {public String getPermutation(int n, int k) {int[] factorial new int[n];factorial[0] 1;for (int i 1; i < n; i) {factorial[i] factorial[i - 1] * i;}--k;StringBuffer ans new StringBuffer();int[] valid…

[数据结构]———交换排序

目录 ​编辑 ​编辑 1.交换排序 第一个定义了一个名为Swap的函数 第二个三数取中 2.冒泡排序 代码解析 冒泡排序的特性总结&#xff1a; 3.快速排序 1. hoare版本 2. 挖坑法 代码解析 3. 前后指针版本 代码解析 1.交换排序 基本思想&#xff1a;所谓交换&#xff0…

virtualbox kafka nat + host-only集群 + windows 外网 多网卡

virtualbox kafka nat + host-only集群 + windows 映射访问 kafka集群搭建背景kafka集群搭建 背景 使用virtualbox搭建kafka集群,涉及到不同网络策略的取舍 首先 桥接 网络虽说 啥都可以,但是涉及到过多ip的时候,而且还不能保证使用的ip不被占用,所以个人选择kafka虚拟机…

java-链表排序

需求 思路 排序&#xff1a;讲所有的值都取出来&#xff0c;存储到ArrayList中&#xff0c;然后排序&#xff0c;将排序之后的元素依次使用add方法添加到自定义链表合并排序&#xff1a;先合并&#xff0c;然后调用刚才写的排序算法合并&#xff1a;将表一的头结点作为新链表的…

开发日志:Kylin麒麟操作系统部署ASP.NET CORE

需求场景&#xff1a; 我需要部署的项目是在Windows上开发的&#xff0c;目标框架为.net core 6.0 因此我们需要先在kylin上部署项目运行所需要的环境。 借助百度词条&#xff0c;先看看Kylin是什么&#xff1a; 服务器资源&#xff1a; 查看系统版本 cat /etc/kylin-releas…

MyBatis 核心配置讲解(下)

大家好&#xff0c;我是王有志&#xff0c;一个分享硬核 Java 技术的互金摸鱼侠。 我们书接上回&#xff0c;继续聊 MyBatis 的核心配置&#xff0c;我们今天分享剩下的 5 项核心配置。 不过正式开始前&#xff0c;我会先纠正上一篇文章 MyBatis 核心配置讲解&#xff08;上&…

React 第十二章 UmiJs

Umi.js 介绍 Umi 是由蚂蚁集团推出的可扩展的企业级前端应用框架。Umi 以路由为基础&#xff0c;同时支持配置式路由和约定式路由&#xff0c;保证路由的功能完备&#xff0c;并以此进行功能扩展。然后配以生命周期完善的插件体系&#xff0c;覆盖从源码到构建产物的每个生命周…

OpenGL 入门(一)—— OpenGL 基础

1、OpenGL 基础知识 1.1 OpenGL 简介 OpenGL&#xff08;Open Graphics Library&#xff09;是图形领域的工业标准&#xff0c;是一套跨编程语言、跨平台、专业的图形编程&#xff08;软件&#xff09;接口。它用于二维、三维图像&#xff0c;是一个功能强大&#xff0c;调用…

PySpark学习---销售情况数据统计分析案例

需求分析&#xff1a; 某公司是做零售相关业务&#xff0c;旗下出品各类收银机. 目前公司的收银机已经在全国铺开,在各个省份均有店铺使用.机器是联网的,每一次使用都会将售卖商品数据上传到公司后台.老板现在想对省份维度的销售情况进行统计分析 逻辑需求&#xff1a; 1.各省销…

数据结构与算法实验题五道 A一元多项式的求导 B还原二叉树 C 六度空间 D 基于词频的文件相似度 E 模拟excel排序

A (1) 输入格式说明&#xff1a; 以指数递降方式输入多项式非零项系数和指数&#xff08;绝对值均为不超过1000的整数&#xff09;。数字间以空格分隔。 (2) 输出格式说明&#xff1a; 以与输入相同的格式输出导数多项式非零项的系数和指数。数字间以空格分隔&#xff0c;但…

第八篇:隔离即力量:Python虚拟环境的终极指南

隔离即力量&#xff1a;Python虚拟环境的终极指南 1 引言 在编程的多元宇宙中&#xff0c;Python语言犹如一颗闪耀的星辰&#xff0c;其魅力不仅仅在于简洁的语法&#xff0c;更在于其庞大而繁荣的生态系统。然而&#xff0c;随着应用的增长和复杂性的提升&#xff0c;开发者们…

ChatGPT 记忆功能上线 能记住你和GPT互动的所有内容

你和ChatGPT的互动从今天开始变得更加智能&#xff01;ChatGPT现在可以记住你的偏好和对话细节&#xff0c;为你提供更加相关的回应。和它聊天&#xff0c;你可以教它记住新的东西&#xff0c;例如&#xff1a;“记住我是素食主义者&#xff0c;当你推荐食谱时。”想了解ChatGP…