JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div id="app">
  <p v-if="show">I am now in DOM</p>
  <p v-else>And now it is not</p>
  <p>Is div upon?</p>
  <template v-if="show">
    <h4>Parent template tag doesn't appear in DOM </h4>
    <p>Inside a template</p>
  </template>
  <button @click="show = !show">Toggle</button>
  <hr>
  
  <h1>Lists</h1>
  
  <h2>Looping through array of objects</h2>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      ({{ ++index }}) <b>{{ item.title }}:</b> {{ item.type }}
    </li>
  </ul>
  
  <h3>Matching keys</h3>
  <ul>
    <li v-for="(name, index) in names" :key="index">
       <template v-for="(value, key, index) in name">
         <div>{{ key }}: {{ value }} ({{++index}})</div>
       </template>
    </li>
  </ul>
  
  <h2>Looping through a list of nubmers</h2>
  <p>
    <span v-for="n in 10" :key="n">
      {{ n }}<template v-if="n<10">, </template>
    </span>
  </p>
  
  <hr>
</div>

Babel + JSX

new Vue({
	el: '#app',
  data: {
  	show: false,
    list: [
    	{title: 'Potato', type: 'vegetable'},
      {title: 'Tomato', type: 'vegetable'},
    	{title: 'Orange', type: 'fruit'},
    	{title: 'Apple', type: 'fruit'},
    ],
    names: [
    	{ name: 'Ann', age: 20 },
    	{ name: 'Max', age: 18 },
    	{ name: 'John', age: 12 },
    	{ name: 'Jane', age: 31 },
    	{ name: 'George', age: 22 },      
    ],
    someHTML: '<b>Hey, I am bold!</b>',
  }
})