Vue.jsで見出しが縦のテーブルを作るサンプルコード（覚え書き）。
環境
- OS: Windows10
- Vue.js: 2.6.12
やりたいこと
Vue.jsで、以下のような見出しが縦のテーブルを作る。
コード
(1) html
vertical-table.html
<htmllang="ja"><head><metacharset="utf-8"><linkrel="stylesheet"href="css/vertical-table.css"></head><body><tableid = "comparison"border = "1"style = "border-collapse: collapse"><tbodyalign = "center"><tr><th>サイト名</th><tdclass = "site-name"v-for = "item in items"><aclass = "site-url"target = "_blank"v-bind:href = "item.siteUrl">{{ item.siteName }}</a></td></tr><tr><th>商品名</th><tdv-for = "item in items">{{ item.productName }}</td></tr><tr><th>価格</th><tdv-for = "item in items">{{ item.price }}</td></tr><tr><th>詳細</th><tdv-for = "item in items"><atarget = "_blank"v-bind:href = "item.detailUrl">詳細</a></td></tr><tr><th>評価</th><tdclass = "rating"v-for="item in items"v-bind:key="item.id"><divv-if = "item.rating === 5">★★★★★</div><divv-else-if = "item.rating === 4">★★★★☆</div><divv-else-if = "item.rating === 3">★★★☆☆</div><divv-else-if = "item.rating === 2">★★☆☆☆</div><divv-else-if = "item.rating === 1">★☆☆☆☆</div><divv-else>-</div></td></tr></tbody></table></body><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script><script type="text/javascript"src="js/vertical-table.js"></script></html>■解説
- 各行のtd要素でv-forを用いて、配列から欲しい要素を取得する。
[オマケ]
今回はサイトの比較表的な内容にしたので、
- v-bind:hrefで、対象ページに遷移できるようにしている。
- v-if, v-else-if, v-elseを使って、評価の値に応じて、条件分岐。
(2) js
vertical-table.js
new Vue({
el: '#comparison',
data: {
items: [
{id:1, siteName:'X商店', siteUrl:'https://www.xxxxx', productName:'おいしい天然水', price:'￥103', detailUrl: 'https://www.xxxxx/detail/202014', rating:5},
{id:2, siteName:'Y SHOP', siteUrl:'https://www.yyyyy', productName:'ピュアウォーター', price:'￥78', detailUrl: 'https://www.yyyyy/detail/304517', rating:3},
{id:3, siteName:'Z商会', siteUrl:'https://www.zzzzz', productName:'ナチュラルなお水', price:'￥99', detailUrl: 'https://www.zzzzz/detail/512382', rating:4},
]
}
})
■解説
ページで表示させる要素を配列itemsで持たせます。
※siteUrl, detailUrlの内容は架空のものです。
(3) css
vertical-table.css
th{background-color:#4689FF;color:#FFFFFF;}.site-name{background-color:#75A9FF;}.site-url:link{color:#FFFFFF;}.site-url:visited{color:#CCCCCC;}.rating{color:#FF82B2;}■解説
今回のメインではないので、配色はわりと適当。
結果
ブラウザで表示すると以下の通りに。
配色が微妙なのは置いておいて、、見出しが縦のテーブルが作れました！
終わりに
想定通りの内容が作れたものの、何度も同じ配列に対し、v-forを使っているのは微妙ですね・・。
よりよい書き方、ご存知の方がいたらぜひ教えてください！
参考
(1) html
- 【HTML/CSS入門】これから学習を始めるための基礎を解説！学習のコツも | SAMURAI ENGINEER
- HTMLのtableでテーブルを作る方法と応用テクニックを解説 | webliker
- HTMLのtable（表）のborder（枠線）を設定する方法を解説！ | SAMURAI ENGINEER
- HTMLのlinkタグとは？基本的な書き方とrel属性まとめ | サルワカ
- 今すぐ覚えられる！HTMLでJavaScriptを読み込む（呼び出す）方法を現役エンジニアが解説【初心者向け】| TECHACADEMYマガジン
- インストール | Vue.js
- リストレンダリング | Vue.js
- テンプレート構文 - ディレクティブ - 引数 | Vue.js
- プロパティ | Vue.js