JSFiddle - React, Tailwind, and code Playground

by kevin0117

HTML

<div id="app">
  <h4>陣列的迴圈</h4>
  <p>請使用 v-for 在物件上，並且加上索引</p>
  <ul>
    <!-- v-for 使用陣列迴圈 -->
    <!-- 這裡的索引會是 0、1、2 等.. -->
    <li v-for="(item, key) in arrayData" v-if="item.age > 16">
      {{ key }} - {{ item.name }} {{ item.age }} 歲
    </li>
  </ul>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    // 陣列型態的資料
    arrayData: [
      {
        name: '小明',
        age: 16
      },
      {
        name: '漂亮阿姨',
        age: 24
      },
      {
        name: '杰倫',
        age: 20
      }
    ],
  },
 });