How to write and use for loop in Vue js ?

Vue.js is one of the best frameworks for JavaScript like ReactJS. The VueJS 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. If you want to create a single-page application then VueJS is the first choice in my opinion. In the development field, there may be so many issues that can not be solved by using a single library, so the VueJS is compatible with other libraries so you can easily go for it. The VueJS is supported by all popular browsers like Chrome, Firefox, IE, Safari, etc. You can easily compare this library with your favorite libraries.

The Loop concept in VueJS facilitates the execution of a set of instructions repeatedly while some condition evaluates as true. In order to repeat a task a fixed amount of time, we make use of the for loop. There are different ways of using a for loop, which is given below:

• Use keys for each row: Unique identifier for every row traversed 
• Over a range for loop: Loop through a defined starting and ending index.
• Use v-if to define a condition: Only run the loop on a certain condition.
• Using the filter to compute data: To remove certain data before running a for loop on that. 
• Use the index in each traverse: Accessing index as well as data with each loop cycle.

Syntax:

<li v-for="item in items" >
    {{item}}
</li>

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

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 VueJS 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 new component’s user makes or the code changes we will be performing will be done in the source folder.

Project Structure

Loop in range (1-10):

Example 1: We will create a UI that runs for a loop to display a list of numbers.

App.vue:

Javascript

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

Output:

Multiplication Table

Loop with key:

Example 2: We will create a UI that runs for a loop with a key for each row.

App.vue:

Javascript

<template>
  <div id="app">
    <h1 style="color: green">
          GeeksforGeeks
    </h1>
    <h3>
        Data Structure
    </h3>
    <ol>
      <li v-for='structure in data_structures' :key='structure'>
        <strong>{{structure}}</strong>
      </li>
    </ol>
  </div>
</template>

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

Output:

Data Structure List

Loop with index and data:

Example 3: In this example, we will create a UI that runs for a loop to display a list of data along with an index.

Javascript

<template>
  <div id="app">
    <h1 style="color: green">
          GeeksforGeeks
    </h1>
    <h3>
        Javascript frameworks
    </h3>
    <ul>
      <li v-for='(framework,index) in frameworks' :key='framework'>
        <strong> {{index}} --- {{framework}}</strong>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        frameworks: [ 'React', 'Vue', 'Angular',
        'Meteor', 'Ember', 'React Native']
      }
    }
  }
</script>

Output:

List of JS Frameworks