JSFiddle - React, Tailwind, and code Playground

by Serghei Cebotari

HTML

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

<div id="exercise">
  <div>
    <button @click="toggle = !toggle">Toggle</button>
    <p v-if="toggle">You either see me ...</p>
    <p v-else>...or me</p>
    <p v-show="toggle">You either see me ...</p>
    <p v-show="!toggle">...or me</p>
  </div>
  <ul>
    <li v-for="(value, index) in array">{{ value }} - {{ index }}</li>
  </ul>
  <ul>
    <li v-for="(value, key, index) in myObject">{{ value }} [{{ key }}] - {{ index }}</li>
  </ul>
  <ul>
    <li v-for="value in testData">
    	<template v-if="value.constructor === Array">
    		<span v-for="item in value">{{ item }} </span>
    	</template>
			<span v-else="">{{ value }}</span>
    </li>
  </ul>
</div>

JavaScript

new Vue({
  el: '#exercise',
  data: {
		toggle: true,
    array: ['Max', 'Anna', 'Chris', 'Manu'],
    myObject: {
      title: 'Lord of the Rings',
      author: 'J.R.R. Tolkiens',
      books: '3'
    },
    testData: {
      name: 'TESTOBJECT', 
      id: 10,
      data: [1.67, 1.33, 0.98, 2.21]
    }
  }
});