JSFiddle - React, Tailwind, and code Playground

by Breno RdV

HTML

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

<div id="app">
<div v-for="n in 10">{{n}}</div>

<ul>
  <li v-for="(ingredient,i) in ingredients">{{ ingredient }} ({{i}})</li>
</ul>

<templa v-for="(ingredient,i) in ingredients">
  <h1>{{ ingredient }}</h1>
  <p>{{ i }}</p>
</templa>
<ul>
  <li v-for="p in persons">{{ p.name }}</li>
</ul>

<ul>
  <li v-for="p in persons">
    <div v-for="(prop, k) in p">{{k}}: {{prop}}</div>
  </li>
</ul>

<ul>
  <li v-for="p in persons">
    <div v-for="(prop, k, i) in p">[{{i}}] {{k}}: {{prop}}</div>
  </li>
</ul>

</div>

JavaScript

new Vue({
	el: "#app",
  data: {
  	ingredients: ['meat', 'fruit', 'cookies'],
    persons: [
    	{name: 'Raccoon', age: 42, color: 'red'},
      {name: 'Raccoonette', age: 24, color: 'blue'}
    ]
  }
});