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.
