【Vue.js】タブ切り替え

こんにちは、ryohei（@ityryohei）です！

本記事では、Vue.jsでタブ切り替えを実装する方法をご紹介しています。

Vue.jsでタブ切り替えを作りたいんだけど、どうすればいいのかな？

上記の疑問にお答えします。

本記事の内容

共通のスクリプト
タブコンテンツを動的に切り替える
タブコンテンツの表示・非表示を切り替える
選択されたタブにactiveのclassを付ける
コンポーネントを使ったタブ切り替え

では、解説していきます。

共通のスクリプト

HTML部分はそれぞれ微妙に異なりますが、スクリプトは共通のものを使用します。

Vue.js

最初にVue.jsを読み込みこんでおきます。これがないと始まりませんね！

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

JS

続いて下記のスクリプトを追記します。Vue.jsでタブ切り替えを実装する方法はいくつかあるかと思いますが、本記事では下記のスクリプトを使用しています。

new Vue({
    el: "#tab",
    data: {
        isActive: "1"
    },
    methods: {
        isSelect: function (num) {
            this.isActive = num;
        }
    }
});

タブコンテンツを動的に切り替える

v-if、v-else-ifでコンテンツを動的に切り替えます。選択中のタブに紐づくコンテンツのみが表示され、それ以外のコンテンツのDOMは生成されません。

HTML

<div id="tab">
    <ul class="tabMenu">
        <li @click="isSelect('1')">All</li>
        <li @click="isSelect('2')">News</li>
        <li @click="isSelect('3')">Event</li>
    </ul>
    <div class="tabContents">
        <div v-if="isActive === '1'">Tab All</div>
        <div v-else-if="isActive === '2'">Tab News</div>
        <div v-else-if="isActive === '3'">Tab Event</div>
    </div>
</div>

DEMO

See the Pen Vue.js | Tab 1 by ryohei (@intotheprogram) on CodePen.31883

タブコンテンツの表示・非表示を切り替える

こちらはコンテンツの表示・非表示を切り替える方法になります。選択中のタブコンテンツはdisplay:blockとなり、他はnoneの状態となります。

<div id="tab">
    <ul class="tabMenu">
        <li @click="isSelect('1')">All</li>
        <li @click="isSelect('2')">News</li>
        <li @click="isSelect('3')">Event</li>
    </ul>
    <div class="tabContents">
        <div v-show="isActive === '1'">Tab All</div>
        <div v-show="isActive === '2'">Tab News</div>
        <div v-show="isActive === '3'">Tab Event</div>
    </div>
</div>

DEMO

See the Pen Vue.js | Tab 2 by ryohei (@intotheprogram) on CodePen.31883

選択されたタブにactiveのclassを付ける

こちらは選択中のタブにactiveのclassをつける処理を追加したものになります。選択中のタブがわかりやすいようにスタイルを付けることが多いため、activeのclassをつけられるかは重要ですね！

<div id="tab">
    <ul class="tabMenu">
        <li @click="isSelect('1')" v-bind:class="{'active': isActive === '1'}">All</li>
        <li @click="isSelect('2')" v-bind:class="{'active': isActive === '2'}">News</li>
        <li @click="isSelect('3')" v-bind:class="{'active': isActive === '3'}">Event</li>
    </ul>
    <div class="tabContents">
        <div v-if="isActive === '1'">Tab All</div>
        <div v-else-if="isActive === '2'">Tab News</div>
        <div v-else-if="isActive === '3'">Tab Event</div>
    </div>
</div>

DEMO

See the Pen Vue.js | Tab3 by ryohei (@intotheprogram) on CodePen.31883

コンポーネントを使ったタブ切り替え

コンポーネントを使ったタブ切り替えの方法です。

JS

Vue.component("tab-all", {
    template: "<div>All Contents</div>"
});

Vue.component("tab-news", {
    template: "<div>News Contents</div>"
});
Vue.component("tab-event", {
    template: "<div>Event Contents</div>"
});
new Vue({
    el: "#tab",
    data: {
        activeTab: "All",
        tabs: ["All", "News", "Event"]
    },
    computed: {
        selectTab: function () {
            return "tab-" + this.activeTab.toLowerCase();
        }
    }
});

HTML

<div id="tab">
    <ul class="tabMenu">
        <li v-for="tab in tabs" v-bind:key="tab" v-bind:class="{ 'active': tab === activeTab }" v-on:click="activeTab = tab">
            {{ tab }}
        </li>
    </ul>
    <component class="tabContents" v-bind:is="selectTab"></component>
</div>