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 相关文章推荐
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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 zend解密软件绿色版测试可用
2008/04/14 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
JavaScript Archive Network 集合
2007/05/12 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
关于js类的定义
2011/06/28 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python创建字典的八种方式
2019/02/27 Python
python调用支付宝支付接口流程
2019/08/15 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Python3监控疫情的完整代码
2020/02/20 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
机械工程及其自动化专业求职信
2014/08/08 职场文书
股东大会通知
2015/04/24 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
小马王观后感
2015/06/11 职场文书
六五普法心得体会2016
2016/01/21 职场文书