面向对象编程 - JavaScript用对象的概念写一个简单的分页
本文介绍了面向对象编程 - JavaScript用对象的概念写一个简单的分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
初次接触对象，现在想写一个简单的分页
<body>
<a href="#" id="first">首页</a>
<a href="#" id="pre">上一页</a>
<span id="pageNum">当前页数</span>/<span id="pageCount">总页数</span>
<a href="#" id="next">下一页</a>
<a href="#" id="last">最后页</a>
<script>
var page = (function(){
var pageNum = 1;
var pageCount = 10;
return {
getPageNum :function(){
return pageNum;
},
getPageCount :function(){
return pageCount;
},
first :function(){
pageNum = 1;
},
last :function(){
pageNum = 10;
},
next:function(){
pageNum++;
},
pre:function(){
pageNum--;
}
}
})
</script></body>
这段js代码是一大牛提供的，但是接下来不知道怎么写，请各位大神帮忙写完整，感谢
解决方案
<body>
<div id="pagebar">
<a href="#" v-if="pageNumber>1" v-on:click="firstPage">首页</a>
<a href="#" v-if="pageNumber>1" v-on:click="prevPage">上一页</a>
{{pageNumber}}/{{pageCount}}
<a href="#" v-if="pageNumber<pageCount" v-on:click="nextPage">下一页</a>
<a href="#" v-if="pageNumber<pageCount" v-on:click="lastPage">最后页</a>
</div>
<script src="js/vue.js"></script>
<script>
//构造方法
var Page = function (recordCount,pageSize) {
// body...
this.recordCount = recordCount;
this.pageSize = pageSize;
this.pageNumber = 1;
this.pageCount = Math.ceil(recordCount/pageSize);
}//this 指向当前对象
Page.prototype.firstPage = function() {
// body...
this.pageNumber = 1;
}
Page.prototype.prevPage = function(){
if(this.pageNumber>1){
this.pageNumber--;
}
}
Page.prototype.nextPage = function(){
if(this.pageNumber<this.pageCount){
this.pageNumber++;
}
}
Page.prototype.lastPage = function(){
this.pageNumber = this.pageCount;
}
var page = new Page(101,10);
var pageBar = new Vue({
el:'#pagebar',
data:{
pageNumber:page.pageNumber,
pageCount:page.pageCount
},
methods:{
firstPage:function(){
page.firstPage();
this.pageNumber=page.pageNumber;
},
prevPage:function(){
page.prevPage();
this.pageNumber=page.pageNumber;
},
nextPage:function(){
page.nextPage();
this.pageNumber=page.pageNumber;
},
lastPage:function(){
page.lastPage();
this.pageNumber=page.pageNumber;
},
}
})
</script></body>
这篇关于面向对象编程 - JavaScript用对象的概念写一个简单的分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
