问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JavaScript用对象的概念写一个简单的分页

头像
o嚄嚄
    1025

    初次接触对象，现在想写一个简单的分页
    <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代码是一大牛提供的，但是接下来不知道怎么写，请各位大神帮忙写完整，感谢

    javascript面向对象编程分页
    阅读 2.1k
    1 个回答
    得票最新
    头像
    o嚄嚄
      1025
      ✓ 已被采纳

      <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>

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题