# Lists / v-for

<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>
 
        Copied!
    

<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>
 
        Copied!
    

<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>
 
        Copied!
    

<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>
 
        Copied!
    

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