For Loops

How to use a v-for directive in vuejs?

Sometimes we need to iterate over the array of items for that vuejs offers v-for directive.

In below example, we are using the person’s array.

<!DOCTYPE html>
<html>
<head>
<title>Vuejs v-for directive</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="#root">
  <ul v-for="person in persons">
    <li>name : {{person.name}}</li>
  </ul>
</div>

<script>
new Vue({
  el:"#root",
  data:{
    persons:[{name:"john",age:11},
           {name:"king",age:34},
           {name:"boo",age:34}
           ]
  }
})
</script>
</body>