JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

HTML

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

<div id="exercise">
  <div>
    <button @click="toggleParagraph">
      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 v-for="(item, i) in list">
    <li>{{ item }} - {{ i }}</li>
  </ul>
  
  <ul v-for="(value, key, i) in obj">
    <li>{{ key }} - {{ value }} -- {{ i }}</li>
  </ul>
  
  <ul>
    <li v-for="value in testData">
      <template v-if="Array.isArray(value)">
        <div v-for="element in value">{{ element }}</div>
      </template>
      <template v-else>
        {{ value }}
      </template>
    </li>
  </ul>
  
</div>

JavaScript

new Vue({
	el: '#exercise',
  data: {
  	toggle: false,
    list: ['a', 'b', 'c', 'd'],
    obj: { 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] }]
  },
  methods: {
  	toggleParagraph () {
    	this.toggle = !this.toggle
    }
  }
})