new Vue({ el: '#page-demo', data:{ page: 0, dispItemSize: 3, datas: [ {key: '1', value: 'value1'}, {key: '2', value: 'value2'}, {key: '3', value: 'value3'}, {key: '4', value: 'value4'}, {key: '5', value: 'value5'}, {key: '6', value: 'value6'}, {key: '7', value: 'value7'}, {key: '8', value: 'value8'}, {key: '9', value: 'value9'}, {key: '10', value: 'value10'} ] }, methods:{ showPrev: function() { if (this.isStartPage) return; this.page--; }, showNext: function() { if (this.isEndPage) return; this.page++; } }, computed:{ dipsItems: function() { var startPage = this.page * this.dispItemSize; return this.datas.slice(startPage, startPage + this.dispItemSize); }, isStartPage: function(){ return (this.page == 0); }, isEndPage: function(){ return ((this.page + 1) * this.dispItemSize >= this.datas.length); } } });
<div id="page-demo"> <div id="pagination"> <p><a href="#" v-on="click: showPrev" class="{{isStartPage ? 'disabled' : ''}}">prev</a></p> <p><a href="#" v-on="click: showNext" class="{{isEndPage ? 'disabled' : ''}}">next</a></p> </div> <ul> <li v-repeat="data: dipsItems">{{data.key}} - {{data.value}}</li> </ul> </div>
a.disabled{ pointer-events: none; cursor: default; text-decoration: none; color: #000000; }