Lists / v-for

v-for without index

Input:

<template>
  <div>
    <li v-for="bigCat in bigCats" :key="bigCat">
      {{ bigCat }}
    </li>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      bigCats: ['Mountain Lion', '	Clouded leopard', 'Eurasian lynx']
    }
  }
}
</script>

Output:

Mountain Lion

Clouded leopard

Eurasian lynx

v-for with index

Input:

<template>
  <div>
    <p>List of Joe Exotic's Five Husbands</p>
    <li v-for="(husband, i) in husbands" :key="i">
      {{ i + 1 }}: {{ husband }}
    </li>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      husbands: ['Brian', 'J.C.', 'John', 'Travis', 'Dillon']
    }
  }
}
</script>

Output:

List of Joe Exotic's Five Husbands

1: Brian

2: J.C.

3: John

4: Travis

5: Dillon

v-for on objects

Input:

<template>
  <div>
    <li v-for="zoo in zoos" :key="zoo.id">
      A ticket to the {{ zoo.name }} cost ${{ zoo.price }}
    </li>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      zoos: [
        { id: '001', name: 'San Diego Zoo', price: 58 },
        { id: '002', name: 'G.W. Zoo', price: 15 },
        { id: '003', name: 'Big Cat Rescue', price: 29 }
      ]
    }
  }
}
</script>

Output:

A ticket to the San Diego Zoo cost $58

A ticket to the G.W. Zoo cost $15

A ticket to the Big Cat Rescue cost $29

v-for on Objects and nested loop

Input:

<template>
  <div>
    <ul v-for="person in persons" :key="person.id">
      <li v-for="(value, key, index) in person" :key="index">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      persons: [
        { id: '001', Name: 'Joe Exotic', Age: 57 },
        { id: '002', Name: 'Carole Baskin', Age: 58 }
      ]
    }
  }
}
</script>

Output:

• id: 001
• Name: Joe Exotic
• Age: 57

• id: 002
• Name: Carole Baskin
• Age: 58

v-for to loop though integers

Input:

<template>
  <div>
    <span v-for="n in 4" :key="n">{{ n + ' Mississipi... ' }}</span>
  </div>
</template>

Output:

1 Mississipi... 2 Mississipi... 3 Mississipi... 4 Mississipi...

See the official Vue.js doc