JSFiddle - React, Tailwind, and code Playground

by kevin0117

HTML

<div id="app">
  <h4>純數字的迴圈</h4>
  <p>請將兩個 tr 一組使用 v-for</p>
  <table class="table">
    <template v-for="item in arrayData">
      <tr>
        <td>{{item.age}}</td>
      </tr>
      <tr>
        <td>{{item.name}}</td>
      </tr>
    </template>
  </table>
</div>

JavaScript

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