6. Using v-for to iterate over a list

Here v-for is used to iterate over a list of strings.

This is App.vue file:

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

<script>
export default {
  data() {
    return {
      hello: "Hello Vue World",
      arr: ["A","B","C","D","E","F"]
    }
  }
}
</script>

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

This is the output: