[Vue.js]見出しが縦のテーブルを作る

Vue.jsで見出しが縦のテーブルを作るサンプルコード（覚え書き）。

## 環境
* OS: Windows10
* Vue.js: 2.6.12

## やりたいこと
Vue.jsで、以下のような見出しが縦のテーブルを作る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/34c2d43e-063f-a65f-e822-8426717bcf7e.png)

## コード

### (1) html
```html:vertical-table.html
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/vertical-table.css">
    </head>
    <body>
        <table id = "comparison" border = "1" style = "border-collapse: collapse">
            <tbody align = "center">
                <tr>
                    <th>サイト名</th><td class = "site-name" v-for = "item in items"><a class = "site-url" target = "_blank" v-bind:href = "item.siteUrl">{{ item.siteName }}</a></td>
                </tr>
                <tr>
                    <th>商品名</th><td v-for = "item in items">{{ item.productName }}</td>
                </tr>
                <tr>
                    <th>価格</th><td v-for = "item in items">{{ item.price }}</td>
                </tr>
                <tr>
                    <th>詳細</th><td v-for = "item in items"><a target = "_blank" v-bind:href = "item.detailUrl">詳細</a></td>
                </tr>
                <tr>
                    <th>評価</th>
                    <td class = "rating" v-for="item in items" v-bind:key="item.id">
                        <div v-if = "item.rating === 5">★★★★★</div>
                        <div v-else-if = "item.rating === 4">★★★★☆</div>
                        <div v-else-if = "item.rating === 3">★★★☆☆</div>
                        <div v-else-if = "item.rating === 2">★★☆☆☆</div>
                        <div v-else-if = "item.rating === 1">★☆☆☆☆</div>
                        <div v-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
```vue: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

```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;
}
```
**■解説**
今回のメインではないので、配色はわりと適当。

## 結果

ブラウザで表示すると以下の通りに。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/d94213c8-2b94-327e-25c9-d2e6e68a3a38.png)


配色が微妙なのは置いておいて、、見出しが縦のテーブルが作れました！

## 終わりに
想定通りの内容が作れたものの、何度も同じ配列に対し、v-forを使っているのは微妙ですね・・。
よりよい書き方、ご存知の方がいたらぜひ教えてください！

## 参考
### (1) html
* [【HTML/CSS入門】これから学習を始めるための基礎を解説！学習のコツも | SAMURAI ENGINEER](https://www.sejuku.net/blog/5641)
* [HTMLのtableでテーブルを作る方法と応用テクニックを解説 | webliker](https://webliker.info/02035/)
* [HTMLのtable（表）のborder（枠線）を設定する方法を解説！ | SAMURAI ENGINEER](https://www.sejuku.net/blog/83489)
* [HTMLのlinkタグとは？基本的な書き方とrel属性まとめ | サルワカ](https://saruwakakun.com/html-css/basic/link-rel)
* [今すぐ覚えられる！HTMLでJavaScriptを読み込む（呼び出す）方法を現役エンジニアが解説【初心者向け】| TECHACADEMYマガジン](https://techacademy.jp/magazine/9650)
* [インストール | Vue.js](https://jp.vuejs.org/v2/guide/installation.html)
* [リストレンダリング | Vue.js](https://jp.vuejs.org/v2/guide/list.html)
* [テンプレート構文 - ディレクティブ - 引数 | Vue.js](https://jp.vuejs.org/v2/guide/syntax.html#%E5%BC%95%E6%95%B0)
* [プロパティ | Vue.js](https://jp.vuejs.org/v2/guide/components-props.html)

### (2) js
* [リスト表示 | Vue.js](https://012-jp.vuejs.org/guide/list.html)

### (3) css
* [HTML,CSS　ホームページの背景色や文字色 （フォントカラー）| COLOR](http://www.netyasun.com/home/color.html)