Vue2.0实现简单分页及跳转效果


Posted in Javascript onJuly 29, 2019

用Vue2.0实现一个数据的分页及页数的跳转,代码如下:

  • 数据绑定:{{...}}        <a v-on:click="btnClick(item)">{{item}}</a>
  • 事件绑定:v-on        <a v-on:click="cur--,pageClick()">上一页</a>
  • 判断:v-if                 <li v-if="cur==1"><a class="banclick">上一页</a></li>
  • 循环:v-for              <li v-for="item in indexs" v-bind:class="{'active':cur==item}"></li>
  • 修改样式:v-bind绑定class属性        <li v-for="item in indexs" v-bind:class="{'active':cur==item}"></li>

HTML代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title>
<style>
 *{margin: 0;padding: 0;}
 #page-break{margin-top: 20px;margin-left: 20px;}
 #page-break li{list-style: none;}
 #page-break a{border: 1px solid #ddd; text-decoration: none;float: left;padding: 6px 12px;color: #337ab7;cursor: pointer}
 #page-break a:hover{background-color: #eee;}
 #page-break a .banclick{cursor: not-allowed;}
 #page-break .active a{color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}
 #page-break i{font-style: normal;color: #d44950;margin: 0px 4px;font-size: 12px;}
 #page-break .jumpbox .jumppage {border: 1px solid #ddd; margin-left: 40px; height: 33px; width: 40px; float: left;}
 #page-break .jumpbox .jumpbtn {cursor: pointer; margin-left: 10px;}
 #page-break .jumpbox .jumpbtn:active {color: #337ab7;}
</style> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="page-break">
 <ul>
 <li v-if="cur>1">
  <a v-on:click="cur--,pageClick()">上一页</a>
 </li>
 <li v-if="cur==1">
  <a class="banclick">上一页</a>
 </li>
 <li v-for="item in indexs" v-bind:class="{'active':cur==item}">
  <a v-on:click="btnClick(item), pageClick()">{{item}}</a>
 </li>
 <li v-if="cur!=all">
  <a v-on:click="cur++,pageClick()">下一页</a>
 </li>
 <li v-if="cur==all">
  <a class="banclick">下一页</a>
 </li>
 <li><a>共<i>{{all}}</i>页</a></li>
 <div class="jumpbox">
 <input type="number" class="jumppage" />
 <a class="jumpbtn" v-on:click="pageSkip()">跳转</a>
 </div>
 </ul>
</div>
</body>
</html>

js代码如下:

new Vue({
 el: '#page-break',
 data: {
 cur: 1,
 all: 20
 },
 watch: {
 cur: function(newValue, oldValue){
 console.log(arguments);
 }
 },
 methods: {
 btnClick(num){
 if(num!=this.cur){
 this.cur=num;
 }
 },
 pageClick(){
 console.log('现在是'+this.cur+'页')
 },
 pageSkip(){
 var maxPage = this.all;
 var skipPage = Number(document.getElementsByClassName("jumppage")[0].value);
 console.log(typeof skipPage);
 if(!skipPage){
 alert("请输入跳转页码");
 return;
 }else if(skipPage<1 || skipPage>maxPage){
 alert("您输入的页码超过页数范围了!");
 return;
 }else{
 //this.cur=skipPage;
 this.btnClick(skipPage);
 this.pageClick();
 }
 }
 },
 computed: {
 indexs(){
 var left = 1;
 var right = this.all;
 var arr = [];
 if(this.all>=7){
 if(this.cur>4 && this.cur<this.all-3){
  left = this.cur-3;
  right = this.cur+3;
 }else if(this.cur<=4){
     left=1;
     right=7;
 }else{
  left=this.all-6;
  right=this.all;
 }
 }
 while(left<=right){
 arr.push(left);
 left++;
 }
 return arr;
 }
 }
})

分页显示如下:

Vue2.0实现简单分页及跳转效果

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
React事件处理的机制及原理
Dec 03 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 #Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 #Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 #Javascript
javascript中this的用法实践分析
Jul 29 #Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 #Javascript
jquery.pager.js分页实现详解
Jul 29 #jQuery
javascript面向对象创建对象的方式小结
Jul 29 #Javascript
You might like
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
php上传文件常见问题总结
2015/02/03 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
《学会待客》教学反思
2014/02/22 职场文书
补充协议书范本
2014/04/23 职场文书
集中采购方案
2014/06/10 职场文书
单位工作证明范文
2014/09/14 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
中学生打架检讨书
2014/10/13 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python