Vue实现简易翻页效果源码分享
时间:2018-11-08
本文给大家分享了vue实现简易翻页效果,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
源码如下:
<html> <head> <meta charset="UTF-8"> <title>slidePage</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } .container { width: 100%; margin: 0 auto; text-align: center; } .content{ font-size: 400px } .leftBtn{ width: 45px; height: 45px; margin-right: 15px; } .rightBtn{ width: 45px; height: 45px; margin-left: 15px; } </style> </head> <body> <div id='root'> <div v-if="numberArr.length == 0">{{showMessage}}</div> <div class="container" v-for="(item, index) in getCurPageContent(numberArr, curPage, itemNumPerPage)" :key="index"> <div class="content">{{item}}</div> <div class="pageButtonList"> <button class="leftBtn" @click="handleClick('leftBtn')"><</button> <span class="pagination">{{curPage}}/{{totalPage}}</span> <button class="rightBtn" @click="handleClick('rightBtn')">></button> </div> </div> </div> <script> new Vue({ el: "#root", data(){ return { showMessage: 'No number', content:'', numberArr: [1, 2, 3, 4], curPage: 1, totalPage: 1, itemNumPerPage: 1 } }, mounted() { this.init() }, methods:{ init(){ this.totalPage = Math.ceil(this.numberArr.length / this.itemNumPerPage) this.totalPage = this.totalPage < 1 ? 1 : this.totalPage }, getCurPageContent: function(numberArr, curPage, itemNumPerPage){ return numberArr.filter(function(element, index){ if(index >= (curPage -1)* itemNumPerPage && index < curPage *itemNumPerPage){ return true }else{ return false } }) }, handleClick: function(arg){ if(arg == 'leftBtn'){ this.curPage = this.curPage > 1 ? --this.curPage : this.totalPage }else if (arg == 'rightBtn'){ this.curPage = this.curPage < this.totalPage ? ++this.curPage: 1 } } // handleLeftClick: function(){ // if(this.curPage > 1){ // this.curPage -- // }else{ // this.curPage = this.totalPage // } // }, // handleRightClick: function(){ // if(this.curPage < this.totalPage){ // this.curPage ++ // }else{ // this.curPage = 1 // } // } } }) </script> </body> </html>
效果如下所示,点击左右能切换页面:
总结
以上所述是小编给大家介绍的Vue实现简易翻页效果源码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python全栈(七)Flask框架之1.Flask简介与URL和视图介绍
- 两个CSS知识点:BFC和选择器权重
- C语言入门系列之9.预处理
- Python爬虫常见异常及解决办法
- 理解nodejs中js和c++的通信原理
- 如何使用FFmpeg将互联网直播点播平台内直播视频流转化为HLS流?
- 记一次nodejs问题排查
- 使用Go语言编译互联网视频直播点播平台EasyDSS出现ld returned 1 exit status错误
- c/c++补完计划(四): 字节对齐和虚继承
- Python 不用selenium 带你高效爬取京东商品评论
- 《闲扯Redis六》Redis五种数据类型之Hash型
- rocketmq学习2
- Python全栈(八)Flask项目实战之1.项目搭建
- 一起来读开源项目的代码-Agar.io为例
- C语言入门系列之11.文件和文件操作