7. Using v-for to Iterate over an object

We can iterate over an object. We get value and key pairs from any object in the data.

This is the App.vue file:

<template>
  <div>
    <h2 v-for="(v,k) in obj">{{hello}} - {{k}} = {{v}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hello: "Hello Vue World",
      obj: {"A":5,"B":7,"C":9,"D":12,"E":15,"F":6}
    }
  }
}
</script>

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

This is the output: