JSFiddle - React, Tailwind, and code Playground

by evzens

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
<!-- 1) Hook up the button to toggle the display of the two paragraphs. Use both v-if and v-show and inspect the elements to see the difference -->
  <div>
    <button v-on:click="isShow =!isShow">Toggle</button>
    <p v-if="isShow">You either see me ...</p>
    <p v-else >...or me</p>
    <p v-show="isShow">You either see me ...</p>
    <p v-show="!isShow">...or me</p>
  </div>
  <!-- 2) Output an <ul> of array elements of your choice. Also print the index of each element. -->
  <ul>
    <li v-for="(arr, index) in array">{{ index }}:{{ arr }} </li>
  </ul>
  <!-- 3) Print all key-value pairs of the following object: {title: 'Lord of the Rings', author: 'J.R.R. Tolkiens', books: '3'}. Also print the index of each item. -->
  <ul>
    <li v-for="(value, key, i) in myObject">{{ value }} {{ key}} {{ i }} </li>
  </ul>
  
  <!-- 4) Print the following object (only the values) and also create a nested loop for the array: {name: 'TESTOBJECT', data: [1.67, 1.33, 0.98, 2.21]} (hint: use v-for and v-if to achieve this) -->
  <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: '#app',
  data: {
    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]
    },
    isShow: false
  } 
});