Vue.js 2系で簡単にタブ切り替えを実装する

はじめに

仕事でVue.js(2系)でタブ切り替えを実装することになったので、アウトプットも兼ねて記事で解説してみようと思いました。
※ [注意]サンプルはVue.js(2系)でしか動きません。

まずはHTMLから記述します。

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

<div id="app">
  <div class="tabGroup">
    <ul class="tabNav">
      <li @click="select(1)" :class="{'active': show == 1}">
        タブAのボタン
      </li>
      <li @click="select(2)" :class="{'active': show == 2}">
        タブBボタン
      </li>
    </ul>
    <div class="tabContent">
      <div v-if="show == 1">タブAの内容を表示</div>
      <div v-else-if="show == 2">タブBの内容を表示</div>
    </div>
  </div>
</div>

上記の<li @click="select(1)" :class="{'active': show == 1}">
はliにクリックイベントを設定し、クリックされたらselectメソッドを呼び出しています。

また:class="{'active': show == 1}"はshowの値が１だったらactiveのclassを付与しています。

タブの内容を表示するところは
v-if="show == 1"だったらタブAの内容を表示し
v-else-if="show == 2"だったらタブBの内容を表示するようにしています。

次はJavaScriptを記述します。

JavaScript

new Vue({
	el: '#app',
  data: {
    show: 1
  },
  methods: {
    select (number) {
      this.show = number;
    }
  }
})

上記の
data: { show: 1 }
でshowの値の初期値を１に設定しています。

HTMLのliのクリックイベントで紐付けたselectメソッドでは渡ってきたパラメータをshowの値にセットしています。
this.show = number;

これでタブのボタンのクリックイベントに紐づいているパラメーターとshowの値が同じ場合のみ、タブのボタンにactiveクラスが付与されて、タブの中身のコンテンツも１つだけ表示されるようになりました。
簡単にタブ切り替えが実装できました。

実装サンプル

See the Pen Untitled by hiromixxx (@hiromixxx) on CodePen.