JSFiddle - React, Tailwind, and code Playground

by evzens

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="(ingredien, i) in ingrediens">{{ ingredien }} ({{ i }} ) </li>
</ul>
<hr>
<ul>
<li v-for="person in persons">
<div v-for="(value, key, index)  in person">{{ key }}: {{ value }} ( {{ index }}) </div>
</li>
</ul>
<span v-for="n in 10">{{ n}} </span>
<template v-for="(ingredien, index) in ingrediens">
  <h2> {{ ingredien}}
  </h2>
  <p>
  {{ index }}
  </p>
</template>
  
</div>

JavaScript

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