Vue Pagination
HTML
<div id="vue">
<button @click="skip -= limit">Previous</button>
<button @click="skip += limit">Next</button>
<div v-for="item, n in page" :key="item"class="item">
{{n + skip}}
</div>
</div>
CSS
.item{
background:white;
padding:5px 10px;
box-shadow:0px 1px 3px #aaa;
margin-top:5px;
}
JavaScript
var items = [1,2,3,4,5,6,7,8,9]
new Vue({
el:'#vue',
data:{
items:items,
limit:5,
skip:0
},
computed:{
page(){
return this.items.slice(this.skip, this.skip + this.limit)
}
}
})