JSFiddle - React, Tailwind, and code Playground

by Andres Abadia

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p v-if="show">You can see me!<span> span </span></p>
  <p v-else>  Now you see me!  </p>
  <template v-if="show">
    <h1>Heading </h1>
    <p>    Inside Template    </p>
  </template>
  <p v-show="show">    Do you also see me?  </p>
  <button @click="show = !show"> Switch </button>
  <hr>
  
  <hr>
  <ul>
    <li v-for="n in 10">{{n}}</li>
  </ul>
  <hr>
  <ul>
    <li v-for="(ingredient, i) in ingredients">{{ ingredient }} ({{ i }})</li>
  </ul>  
  <hr>
  <ul>
    <li v-for="person in persons">{{person.name}}
      <div v-for="(name, key, index) in person">{{name}}: {{key}} ({{index}})</div>
    </li>
  </ul>
  <hr>
  <template v-for="(ingredient, i) in ingredients">
  <h1>{{ ingredient }}</h1> <p>
  {{ i }}
  </p>
  </template>
</div>

JavaScript

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