Vue2.0实现简单分页及跳转效果
更新时间：2019年07月29日 10:15:23 作者：Freya_yyy
这篇文章主要为大家详细介绍了Vue2.0实现简单数据分页，及页数的跳转效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用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;
}
}
})
分页显示如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue3中新增了setup,它的出现是为了解决组件内容庞大后,理解和维护组件变得困难的问题,下面这篇文章主要给大家介绍了关于Vue3使用setup如何定义组件的name属性的相关资料,需要的朋友可以参考下2022-06-06
Vue 数值改变页面没有刷新的问题解决(数据改变视图不更新的问题)
这篇文章主要介绍了Vue 数值改变页面没有刷新的问题解决(数据改变视图不更新的问题),本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
再次遇到监听子组件收到父组件传过来的值,如果这个值变化,页面中的值发现是不会跟着同步变化的,本文给大家介绍Vue2 watch监听props的值,感兴趣的朋友一起看看吧2023-12-12
Vue过滤器,生命周期函数和vue-resource简单介绍
这篇文章主要介绍了Vue过滤器,生命周期函数和vue-resource简单介绍，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了vue cli如何配置开发环境下的sourcemap问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了vue无限轮播插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue中的v-if和v-show的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了vue实现界面滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
ESLint主要用于代码规范、统一代码风格,下面这篇文章主要给大家介绍了关于vue3配置ESLint的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
Pinia是Vue的一个存储库,它允许你跨组件/页面共享状态,下面这篇文章主要给大家介绍了关于vue3+pinia的快速入门使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
最新评论