• Vue.js

Vue.jsでタブ切り替えを実装する方法【簡単】

Vue.jsでタブ切り替えを実装したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

Vue.jsの導入方法についてはこちら

実装サンプル

See the Pen
Vue.js タブ切り替え by Kohei (@kouk05)
on CodePen.0

タブ切り替えの実装サンプルです。

タブをクリックする事で、コンテンツが切り替わっているのがわかります。

実装手順は以下の通りです。

HTML

<div id="app">
  <div class="tabgroup">
    <ul class="tabnav">
      <li @click="select('1')" v-bind:class="{'active': show == '1'}">
        タブ1ボタン
      </li>
      <li @click="select('2')" v-bind:class="{'active': show == '2'}">
        タブ2ボタン
      </li>
    </ul>
    <div class="tabcontent">
      <div v-if="show == '1'" class="tabcontent-list">タブ1の内容</div>
      <div v-else-if="show == '2'" class="tabcontent-list">タブ2の内容</div>
    </div>
  </div>
</div>

まず最初にタブ切り替えのHTMLを準備します。

タブ部分をul liタグなどで作成。

liタグに@click属性を付与。

値にselectメソッドを定義。引数に任意の数値を指定します。

同じくliタグにv-bind:class属性を付与。

値に以下を指定します。

{‘active’: show == ‘任意の数値’}

showが任意の数値だったら、activeクラスを付与するという記述です。

任意の数値はselectメソッドで指定した引数と同じにします。

これをタブの数だけ作成。任意の数値は他のタブと被らない数値を指定します。

次にタブをクリックしたら表示するコンテンツ部分を作成。

タブの数だけdivタグなどで作成します。

上記で作成したdivタグにv-if、v-else-if属性を付与。

値に以下を指定します。

v-if=”show == ‘任意の数値'”
v-else-if=”show == ‘任意の数値'”

任意の数値はタブの属性で指定した数値と同じものを指定します。

Vue.jsでタブ切り替え

const app = Vue.createApp({
  data() {
    return {
      show: "1",
    };
  },
  methods: {
    select: function (num) {
      this.show = num;
    },
  },
});
app.mount("#app");

Vue.jsでタブ切り替えを機能させます。

データメソッドにshowを定義。

値にデフォルトで表示させたいタブの引数に与えた数値を設定します。

methodsオプション内にselectメソッドを定義。

引数にnum変数を指定。

タブをクリックした時、そのタブの@click属性で定義したselectの引数が、コンテンツで指定したv-if、v-else-if属性で指定したshowの数値と==だったらコンテンツを表示、それ以外のコンテンツは非表示にするという処理を実行します。

以上でタブ切り替えの完成です。

まとめ

Vue.jsでタブ切り替えを実装する方法について紹介しました。

以上で解説を終わります。