JSFiddle - React, Tailwind, and code Playground

by Serghei Cebotari

HTML

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

<div id="app">
	<ul>
		<li v-for="(ingredient, index) in ingredients"> {{ ingredient }} ({{ index }})</li>
	</ul>
	<ul>
		<li v-for="person in persons">{{ `${person.name} ${person.age}` }}</li>
	</ul>
	<ul>
		<li v-for="person in persons"><span v-for="values in person">{{values}} </span></li>
	</ul>
	<ul>
		<span v-for="n in 10">{{n}}</span>
	</ul>
</div>

JavaScript

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