JSFiddle - React, Tailwind, and code Playground

by bc_rikko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
<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>

CSS

a.disabled{
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: #000000;
}

JavaScript

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);
        }
    }
});