The very first Vue.js example
HTML
<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<div v-for="(chunk,index) in chunks">
<ul v-for="item in chunk" v-if="currentIndex == index">
<li>{{item.title}}</li>
</ul>
</div>
<button @click="currentIndex -= 1">
previous
</button>
<button @click="currentIndex += 1">
Next
</button>
</div>
JavaScript
var data = {
message: 'Hello Vue.js!'
}
var demo = new Vue({
el: '#demo',
data: function(){
return {
data: [{id: 3, title: 'title 3'}, {id: 2, title: 'title 2'}, {id: 1, title: 'title 1'}, {id: 5, title: 'title 5'}, {id: 4, title: 'title 4'}].sort((a, b) => +a.id - +b.id),
currentIndex: 0
};
},
computed: {
chunks () {
var size = 2, smallarray = [];
for (var i= 0; i<this.data.length; i+=size) {
smallarray.push(this.data.slice(i,i+size))
}
return smallarray
}
}
})