SOURCE

new Vue({
  el: '#exercise',
  data:{
    show:true,
    exist:true,
    numList:[1,3,4,8,2,5,4,6,4,4,7],
    bookList:[
      {title: 'Lord of the Rings', author: 'J.R.R. Tolkiens', books: '3'}
    ],
    list:{name: 'TESTOBJECT', data: [1.67, 1.33, 0.98, 2.21]}
  }
});

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

<div id="exercise">
  <!-- 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 @click="exist=!exist">Toggle (v-if)</button>
    <p v-if="exist">You either see me ...</p>
    <p v-else>...or me</p>
    <button @click="show=!show">Toggle(v-show)</button>
    <p v-show="show">You either see me ...</p>
    <p v-show="!show">...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="(num,index) in numList">{{index}}|{{num}}</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="book in bookList">
      <span v-for="(value,key,index) in book">{{index}}|{{key}}:{{value}}||</span>
    </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="item in list">
      <template v-if="Array.isArray(item)">
        <div v-for="i in item">{{i}} | </div>
      </template>
      <template v-else>{{item}}</template>
    </li>
  </ul>
  
</div>