【Vue.js】タブで切り替えるコンテンツの実装

先日、jQeuryでタブ切り替えを実装する方法を書いたのですが、今度はそれをVue.jsで実装してみることにしました。

作ったもの

こちらです。

demo

実装方法

HTML

<div id="tab">
  <ul class="tabMenu">
    <li class="tabItem" v-for="(tab,index) in tabs" v-on:click="activetab=(index+1)" v-bind:class="[ activetab === (index+1) ? 'active' : '' ]">{{tab.tabitem}}</li>
  </ul>

  <div class="tabContent">
    <div class="tabBlock" v-for="(item,index) in contents" v-bind:class="[ activetab === (index+1) ? 'show' : '' ]">
      <div class="tabBlock__inner">
        <h3 class="tabBlock__title">{{item.title}}</h3>
        <p class="tabBlock__text">{{item.text}}</p>
      </div>
    </div>
  </div>
</div>

CSS

*{
  box-sizing: border-box;
}
ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}
#tab{
  max-width: 640px;
  margin: 0 auto;
}

.tabMenu{
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  list-style: none;
  border-bottom: 1px solid #ffa594;
}
.tabItem{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  flex-basis: 32%;
  flex-shrink: 0;
  border-left: 1px solid #ffa594;
  border-right: 1px solid #ffa594;
  border-top: 1px solid #ffa594;
  border-radius: 10px 10px 0 0;
  color: #ffa594;
  font-weight: bold;
  text-align: center;
}
.tabItem.active{
  background-color: #ffa594;
  color: #fff;
}

.tabContent{
  position: relative;
  border: 1px solid #ffa594;
}
.tabBlock{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 60px;
  opacity: 0;
  transition: .5s;
}
.tabBlock.show{
  position: static;
  opacity: 1;
}

Javascript(Vue.js)

var tab = new Vue({
  el: '#tab',
  data: {
    activetab: 1,

    tabs: [
      { tabitem: "tab01" },
      { tabitem: "tab02" },
      { tabitem: "tab03" },
    ],
    contents: [
      {
        title: "コンテンツ01",
        text: "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
      },
      {
        title: "コンテンツ02",
        text: "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
      },
      {
        title: "コンテンツ03",
        text: "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
      },
    ],
  }
});

簡単な説明

v-forでタブメニューを生成し、その順番を利用して activetab という変数の値を変化させて、今どれがアクティブな状態なのかを判定しています。
また、表示するコンテンツの方も、同じようにv-forで生成して、同じ順番のものをアクティブにするようにしています。

まとめ

jQueryのものと比べるとこちらの方がややコードがすっきりして見えるように思います。
実際、編集するときはJSの配列の値を変更するだけなので、触るところも明白かと。
HTMLが長くなるとどこ触っていいかわからなくなってくるので。。。

引き続き勉強がてらVue.jsでいろいろやってみたいと思います。