Vue

VueJS2: Assignment 5

by Aubrey Taylor

HTML

<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="show = !show">Toggle</button>
    <p v-if="show">You either see me ...</p>
    <p v-else>...or me</p>
    <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="(each, i) in array">{{ i }}: {{ each }}</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">
      <p>{{ i }}: {{ key }}: {{ value }}</p>
    </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, key, i) in testData">
      <p v-if="!Array.isArray(value)">{{ i }}: {{ key }}: {{ value }}</p>
      <template v-else>
        <p>{{ i }}: {{ key }}:</p>
        <ul>
          <li v-for="(n, i) in value">
            <p>{{ i }}: {{ n }}</p>
          </li>
        </ul>
      </template>
    </li>
  </ul>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica, sans-serif;
}

#exercise {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: '#exercise',
  data: {
  	show: 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]
    }
  }
});