2年前に投稿

Vue.jsのv-forでTableを表示させてみた

DISCLAIMER: This article is more than a year old and may not be current.

この記事は約 3 分で読めます。

3.5

Vue.js ガイド、リストレンダリングで、
v-for で配列に要素をマッピングする
と言う項目を参考に、
Table を表示させてみました。

<div id="app">
  <table class="vue_tbl">
    <thead>
      <tr>
        <th>DATE</th>
        <th>RBC level <span style="font-size: 12px">(10⁶/㎕)</span></th>
        <th>Hgb level <span style="font-size: 12px">(g/dL)</span></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items">
        <td>Day {{ index + 1 }}</td>
        <td>{{ item.rbc }}</td>
        <td>{{ item.hgb }}</td>
      </tr>
    </tbody>
  </table>
</div>
var app = new Vue({
 el: "#app",
 data: {
  items: [{
   rbc: "5.1",
   hgb: "7.8"
  }]
 }
});
Data from blood test report
DATE RBC level (10⁶/㎕) Hgb level (g/dL)
Day {{ index + 1 }} {{ item.rbc }} {{ item.hgb }}

余談ですが、
Vue.js の最新バージョンの
コードネームは Macrossなのですね。
マクロスはアニメの
「超時空要塞マクロス」のことでしょうか？

調べてみると、
v0.9.0から発表順に、
アルファベット順で始まる
アニメの名前が付けられているようです。

次バージョンのコードネームの
予想をしている記事もありました。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Vue.jsのv-forでTableを表示させてみた

カスタマイズ - Vue.jsJS,Library,Reference,Vue.js

Posted by FOUR 4to6