Vue.js List Rendering v-for with a Range

Last Updated : 06 Apr, 2022

Vue.js is one of the best frameworks for JavaScript like React JS. The Vue JS is used to design the user interface layer, it is easy to pick up for any developer. It is compatible with other libraries and extensions as well. The Vue JS is supported by all popular browsers like Chrome, Firefox, IE, Safari, etc.

There are a lot of data that needs to be rendered on a web page. Sometimes, the user requires the data to be displayed for the specified range. This is when v-for comes in handy. It runs the loop to a specified index ie, loop through a defined starting and ending index.

Syntax:

<li v-for="index in end-limit" >
    {{index}}
</li>

Approach: Here, we will create a Vue project, and then we will create a different UI that uses the for loop with a range.

Creating Vue Project:

Step 1: To create a Vue app you need to install Vue modules using this npm command. You need to make sure you have the node installed previously.

npm install vue

Step 2: Use Vue JS through CLI. Open your terminal or command prompt and run the below command.

npm install --global vue-cli

Step 3: Run the below command to create the project.

vue init webpack myproject

Step 4: After creating your Vue project move into the folder to perform different operations.

cd myproject

Step to run the application: Open the terminal and type the following command.

npm run dev

Open your browser. Open a tab with localhost running (http://localhost:8080/) and you can see the output shown in the image.

Project Structure: After running the commands (mentioned in the above steps), if you open the project in an editor, you can see a similar project structure (as shown below).

The below example will illustrate the use of v-for with a range.

Example 1: Loop in a range from index 1 to index 10. Make use of only the index for a specified range.

App.vue

<template>
  <div id="app">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>10's Multiplication table</h3>
    <ul>
      <li v-for="index in 10" :key="index">
        <strong>10 * {{ index }} =
        {{ index * 10 }}</strong>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "App",
  };
</script>

Output:

Example 2: Using an index to access an element from data within the specified range. index -1 since it is 1-indexed.

App.vue

<template>
  <div id="app">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>First 5 Data Structure</h3>
    <ul>
      <li v-for="index in 5" :key="index">
        <strong>
            {{ data_structures[index - 1] }}
        </strong>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        data_structures: [
          "Array",
          "Linked-list",
          "Stack",
          "Queue",
          "Heap",
          "Tree",
        ],
      };
    },
  };
</script>

Output:

Example 3: In this example, we are extracting the last 3 elements of a list by accessing the elements without using the index but by slicing the data. We can slice the data to run the loop as per requirement.

App.vue

<template>
  <div id="app">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h3>Last 3 Data Structure</h3>
    <ul>
      <li
        v-for="(structure, index) in data_structures.slice(
          data_structures.length - 3,
          data_structures.length)":key="index">
        <strong>
            {{ structure }}
        </strong>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        data_structures: [
          "Array",
          "Linked-list",
          "Stack",
          "Queue",
          "Heap",
          "Tree",
        ],
      };
    },
  };
</script>