Vue.jsのv-forでTableを表示させてみた
この記事は約 3 分で読めます。
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"
}]
}
});
DATE | RBC level (10⁶/㎕) | Hgb level (g/dL) |
---|---|---|
Day {{ index + 1 }} | {{ item.rbc }} | {{ item.hgb }} |
余談ですが、
Vue.js の最新バージョンの
コードネームは Macrossなのですね。
マクロスはアニメの
「超時空要塞マクロス」のことでしょうか?
調べてみると、
v0.9.0から発表順に、
アルファベット順で始まる
アニメの名前が付けられているようです。
次バージョンのコードネームの
予想をしている記事もありました。
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
諜報部員、御挨拶に参上!♪
コードネームというのは、面白いもので、無機的なソフトウエアに血が通うようにも思います。
マクロス(笑)、どうも
「ドッグファイト」が焼き付いています(笑)
https://www.youtube.com/watch?v=EcTdPUsFfFI
お返事遅くなりました。
お疲れさまです。
魂をふきこむと言う事でしょうね。
アハハ!確かに!
この戦闘シーンとBGMは凄い!