[Vuejs]-How to control the v-for times dynamically?

3👍

You can add v-if:

<div v-for="item in 10" v-if="item >=min && item <= max" style="background-color: red" >{{ item }}</div>

you can change the min and max dynamically.

0👍

You can pass a property of your component’s data as the number:

<div v-for="number in count">{{ number }}</div>

If you want to start counting from a different number, you can use a property for that too:

<div v-for="number in count">{{ start - 1 + number }}</div>

See it here in action: https://codepen.io/JosephSilber/pen/vjKBRg

Leave a comment