index.html

<!DOCTYPE >
<html>
  <head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>

  <body>
    <div id="app">
      <!-- <p v-if="mode == 1">Showing v-if directive content</p>
      <template v-else-if="mode == 2">
        <p>Bonus content</p>
        <h3>v-else-if</h3>
      </template>
      <p v-else>v-else</p>

      <i v-show="mode == 1">v-show</i>

      <select v-model="mode">
        <option value="1">v-if</option>
        <option value="2">v-else-if</option>
        <option value="3">v-else</option>
      </select> -->
      <ul>
        <li v-for="(bird, index) in birds" :class="bird" :key="bird">
          {{ bird }} - {{ index }}
        </li>
      </ul>

      <hr />

      <ul>
        <li v-for="person in people">
          <div v-for="(value, key, index) in person">
            {{ key }}: {{ value }} - Index: {{ index }}
          </div>
        </li>
      </ul>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>