How to render v-for from particular index - vue.js

Question

I want to loop in v-for from suppose from number 5 to 10 .
The loop want to be started at 5 and end at 10.
I have tried this
<div v-for="n in 10" v-if="n>=5"></div>
But I want more effective way of doing the loop . Does anyone knows how to do so that loop starts at 5 ?

Answer 1

Its possible for your example:
<div v-for="i in range(5, 10)">
... some code here
</div>
and mount range function:
var app = new Vue({
el: '#app',
methods:{
range : function (start, end) {
return Array(end - start + 1).fill().map((_, idx) => start + idx)
}
}
});
and sample in jsfidle.
If want know more than this github issue can help you.

Answer 2

Also try this simple approach:
new Vue({
el: '#test',
data: {
items: [
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10'
]
},
methods: {
sliceItems: function (start, end) {
return this.items.slice(start, end);
}
}
})
<script src="https://unpkg.com/vue#2.4.2/dist/vue.min.js"></script>
<div id="test">
<ul>
<li v-for="(item, index) in sliceItems(5,10)" >{{ item }}</li>
</ul>
</div>

Answer 3

Another simple alternative is to just use basic +/-:
new Vue({
el: '#app',
data: {
start: 5,
end: 10
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<ul>
<li v-for="i in end-start" >{{ i+start }}</li>
</ul>
</div>
If you really need to use {{ i }} a lot of times and is bothered by adding start, you can use a little trick:
new Vue({
el: '#app',
data: {
start: 5,
end: 10
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<ul>
<template v-for="curr in end-start" >
<li v-for="i in [curr+start]">
{{ i }}{{ i }}{{ i }}{{ i }}{{ i }}{{ i }}{{ i }}{{ i }}{{ i }}
</li>
</template>
</ul>
</div>