How do you use v-for directive with a range?

When developing with Vue.js, the v-for directive is a powerful tool that allows us to render a set of data based on arrays or objects. Additionally, v-for can be used with an integer to repeat operations multiple times, which is commonly referred to as using 'range'.

Basic Syntax for Using v-for with Range

You can use v-for to repeat an element multiple times as follows:

html
<div v-for="n in 10">{{ n }}</div>

In this example, n starts from 1 and increments up to 10. During each iteration, the value of n increases until it reaches 10. The number 10 represents the iteration count, which can be understood as a range from 1 to 10.

Practical Application Examples

Example 1: Creating a Simple Number List

Suppose you need to create a number list from 1 to 10; you can use the following code:

html
<ol>
  <li v-for="number in 10">{{ number }}</li>
</ol>

This code generates an ordered list containing the numbers 1 to 10.

Example 2: Setting Styles Based on Range

Sometimes we may need to change styles based on the iteration count, as shown below:

html
<div v-for="i in 5" :class="{ 'bg-green': i % 2 === 0 }">
  This is box {{ i }}
</div>

Here, we use a ternary operator to check if the current index i is even; if so, we add the 'bg-green' class to modify the background color.

Summary

Using the combination of v-for and range can conveniently create repeated elements, especially when generating lists based on simple numeric ranges or applying logic such as different colors for even and odd rows. This approach simplifies the code, avoids the need for additional arrays or objects, and is particularly useful in static display scenarios before data is retrieved from the backend.