vue learing: for loops

by giordanna

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="(ingredient, i) in ingredients">{{ ingredient }} ({{ i }})</li>
  </ul>
  <hr>
  
  <ul>
    <li v-for="person in persons">
      <span v-for="value in person">
        {{ value }}
      </span>
    </li>
  </ul>
  
  <hr>
  <template v-for="(ingredient, i) in ingredients">
    <h1>{{ ingredient }}</h1>
    <p>{{ i }}</p>
  </template>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	ingredients: ['meat', 'fruit', 'cookies'],
    persons: [
    	{name: 'Max', age: 27, color: 'red'},
      {name: 'Anna', age: 'unknown', color: 'blue'}
    ]
  }
})