Vue Js For Loop (v-for) Example Tutorial

Vue Js For Loop (v-for) Example Tutorial

Vue js for loop (v-for) example tutorial. In this tutorial, you will learn how to use for loop or v-for in vue js or How to loop through a list of elements and display it in VueJS.

This tutorial will guide you step by step on how to use for loop or v-for in vue js. And as well as, you can use the v-for directive to render a list of items based on an array.

Note that, The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on.

And you can use use for loop or v-for loop in vue js for:

  • Rendering arrays or lists
  • Iterating through the properties of an object

How to use for loop or v-for in vue js

This tutorial will show you two examples of how to use for loop or v-for loop in vue js:

Example 1 – V-for Loop Iteration

<!DOCTYPE html>
<html>
<head>
  <title>Vue.Js For Loop Example - tutsmake.com</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-6 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5 v-bind:class="red">Vue.Js For Loop v-for Example</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <ul>
                <li v-for="item in items" v-text="item.lang"></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
  Vue.config.devtools = true
  var app = new Vue({
    el:'.card-body',
    data:{
      items:[
       { lang: 'Php' },
           { lang: 'Laravel'},
           { lang: 'Java'},
           { lang: 'c'},
           { lang: 'c#'},
           { lang: 'python'},
      ],
    }
  })
  
</script>
</body>
</html>

The following code will print items from list of array in vue js:

   <ul>

    <li v-for="item in items" v-text="item.lang"></li>

  </ul>

Example 2 – V-for Loop iteration

<!DOCTYPE html>
<html>
<head>
  <title>Vue.Js For Loop Example - tutsmake.com</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-6 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5 v-bind:class="red">Vue.Js For Loop v-for Example</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <ul>

                <li v-for='item in item'>
                  {{ item.lang }}
                </li>

              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
  Vue.config.devtools = true
  var app = new Vue({
    el:'.card-body',
    data:{
      items:[
       { lang: 'Php' },
           { lang: 'Laravel'},
           { lang: 'Java'},
           { lang: 'c'},
           { lang: 'c#'},
           { lang: 'python'},
      ],
    }
  })
  
</script>
</body>
</html>

The following code will print items from list of array in vue js:

            <ul>

                <li v-for='item in item'>
                  {{ item.lang }}
                </li>

            </ul>

Example 3 – V-for Loop iteration

<!DOCTYPE html>
<html>
<head>
  <title>Vue.Js For Loop Example - tutsmake.com</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-6 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5 v-bind:class="red">Vue.Js For Loop v-for Example</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <h3>Courses Details!</h3>
                <table>
                  <tr>
                    <th>Course Id</th>
                    <th>Course Name</th>
                    <th>Instructor</th>
                  </tr>
                  <tr v-for='Course in Courses'>
                    <td>{{Course.CourseId}}</td>
                    <td>{{Course.CourseName}}</td>
                    <td>{{Course.instructor}}</td>
                  </tr>
                </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
  Vue.config.devtools = true
  var app = new Vue({
    el:'.card-body',
    data: {
      Courses: [
        {
          CourseId: '100A',
          CourseName: 'React.js',
          instructor: 'Stphen Grider'
        },
        {
          CourseId: '100B',
          CourseName: 'Vue.js',
          instructor: 'Maxmillian'
        },
        {
          CourseId: '100C',
          CourseName: 'Angular.js',
          instructor: 'Maxmillian'
        },
        {
          CourseId: '100D',
          CourseName: 'Java',
          instructor: 'Tim Buchikka'
        },
        {
          CourseId: '100E',
          CourseName: 'web Dev',
          instructor: 'Colt Stele'
        }
      ]
    }
  })
  
</script>
</body>
</html>

The following code will print items from list of array in vue js:

                  <tr v-for='Course in Courses'>
                    <td>{{Course.CourseId}}</td>
                    <td>{{Course.CourseName}}</td>
                    <td>{{Course.instructor}}</td>
                  </tr>

Conclusion

vue js for loop example tutorial you have learn how to use for loop or v-for loop in vue js.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *