More than 3 years have passed since last update.

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

Last updated at 2021-02-26Posted at 2021-02-23

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

環境

OS: Windows10
Vue.js: 2.6.12

やりたいこと

Vue.jsで、以下のような見出しが縦のテーブルを作る。

コード

(1) 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

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

(2) js

リスト表示 | Vue.js

(3) css

HTML,CSS　ホームページの背景色や文字色（フォントカラー）| COLOR

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up