用VUE实现的一个分页。

var myMsgTable = new Vue({        el: '#myMsgTable',        data: {            list: [],            total: 0,            pageSize: 20,            page: 1,            rows: 0        },        computed: {            totalPage: function () {                if (this.total == 0) {                    return 1;                }                return parseInt((this.total + this.pageSize - 1) / this.pageSize);            },            offset: function () {                return (this.page - 1) * this.pageSize;            },            limit: function () {                return this.pageSize;            },            isFirstPage: function () {                return this.page == 1;            },            isLastPage: function () {                return this.page === this.totalPage;            }        },        methods: {            nextPage: function () {                if (this.page < this.totalPage) {                    this.page++;                    this.loadPage();                }            },            prevPage: function () {                if (this.page > 1) {                    this.page--;                    this.loadPage();                }            },            goPage: function (page) {                if (this.page == page) {                    return;                }                this.page = page;                this.loadPage();            },            loadPage: function () {                var _this = this;                $.post('/data.json', {                    offset: this.offset,                    limit: this.pageSize                }, function (data) {                    _this.$set("list", data.rows);                    _this.$set("total", data.total);                });            }        }    });

下面是表格：

    
                                 
      
                                       
标题
                                       
消息内容
                                       
消息时间
                                  
                                  
                                       
{
   {p.readStatus==2?'':'[未读]'}}{
   {p.title}}
                                       
{
   {p.content}}
                                       
{
   {p.sendTime | date 'YYYY-MM-DD HH:mm'}}
                                  
                                  
                                       
                                    
        
                                        
         首页                                        
         上一页                                        
         下一页                                        
         末页                                        
         共{ {total}}条记录                                        
         共{ {totalPage}}页                                        
         跳转到                                        
          { {n+1}}                                         
         页                                    
        
                                
                                  
                             
    

tips：

本文由导入，原文链接：