5. Using v-for to iterate over a range

We can use v-for to iterate over a range if we iterate over a number. Here the variable i will go from 1 to 5.

This is App.vue:

<template>
  <div>
    <h2 v-for="i in 5">{{hello}} - {{i}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hello: "Hello Vue World"
    }
  }
}
</script>

<style>
h2 {
  color: blue;
  background-color: orange;
  width: 300px;
}
</style>

This is the output: