JSFiddle - React, Tailwind, and code Playground

by kevin0117

HTML

<div id="app">
  <h4>陣列的迴圈</h4>
  <p>請使用 v-for 在物件上，並且加上索引</p>
  <ul>
    <!-- v-for 使用物件迴圈 -->
    <!-- 這裡的索引會是物件的屬性（ex: ming, jay, auntie） -->
    <li v-for="(item, key) in objectData">
      {{ key }} - {{ item.name }} {{ item.age }} 歲
    </li>
  </ul>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    // 物件型態的資料
    objectData: {
      ming: {
        name: '小明',
        age: 16
      },
      auntie: {
        name: '漂亮阿姨',
        age: 24
      },
      jay: {
        name: '杰倫',
        age: 20
      }
    },
  },
 });