Vueコード

雛形コードを元に Vue.js を用いて実装していきましょう。

1. タブメニューを v-bind:class でクラスをバインディングしよう。

#1-1. v-bind:class とは？

HTMLの要素に v-bind:class="{ クラス名 : プロパティ名 }" とする事でクラスを動的に切り替える事ができます。プロパティ名には真偽値のものが入り真偽値が真の場合にクラスを付与する事ができます。また v-bind: ディレクティブはよく使うため省略して書く事ができます。 :class="{ クラス名 : プロパティ名 }"

#1-2. 変数を用意する。

app.js

new Vue({
  el: '#app',
  data: {
    active: 0, // 追加
  },
});

#1-3. タブメニューに v-bind:class を記載する。

index.html

<ul class="tab__menu">
  <!-- v-bindディレクティブを記載する -->
  <!-- v-bindは省略できる -->
  <li class="tab__item" :class="{ 'tab--active': active === 0 }">タブ1</li>
  <li class="tab__item" :class="{ 'tab--active': active === 1 }">タブ2</li>
  <li class="tab__item" :class="{ 'tab--active': active === 2 }">タブ3</li>
</ul>

ここまででクラスのバインディングをする事ができました。次に v-on:click を用いて各タブがクリックされた際に active の値を切り替えられるようにしましょう。

#1-4. v-on:click で active の値を切り替えられるようにする。

index.html

<ul class="tab__menu">
  <!-- v-onディレクティブを記載する -->
  <!-- 見やすいように class="tab__item" を省略しています。 -->
  <li :class="{ 'tab--active': active === 0 }" @click="active = 0">タブ1</li>
  <li :class="{ 'tab--active': active === 1 }" @click="active = 1">タブ2</li>
  <li :class="{ 'tab--active': active === 2 }" @click="active = 2">タブ3</li>
</ul>

2. タブコンテンツを v-show で管理する。

#2-1. タブコンテンツに v-show を記載する。

index.html

<div class="tab__contents">
  <!-- v-showディレクティングを記載する。 -->
  <div v-show="active === 0">
    <p class="tab__text">タブ1を表示しています。</p>
  </div>
  <div v-show="active === 1">
    <p class="tab__text">タブ2を表示しています。</p>
  </div>
  <div v-show="active === 2">
    <p class="tab__text">タブ3を表示しています。</p>
  </div>
</div>

ここまでで成果物のようにタブを実装する事ができました。しかし、現在のタブメニューは重複する部分が多いので v-for を利用してより簡潔なコードにしていきましょう。

3. タブメニューを v-for で管理する。

#3-1. 現在のタブメニュー

現在のタブメニューでは v-bind:class や v-on:click など同じような処理があります。これらは v-for を利用することにより簡潔にする事ができます。

index.html

<ul class="tab__menu">
  <!-- 見やすいように class="tab__item" を省略しています。 -->
  <li :class="{ tab_active: active === 0 }" @click="active = 0">タブ1</li>
  <li :class="{ tab_active: active === 1 }" @click="active = 1">タブ2</li>
  <li :class="{ tab_active: active === 2 }" @click="active = 2">タブ3</li>
</ul>

#3-2. v-for とは？

HTMLの要素に v-for="要素名 in 配列" とする事で配列などの複数のデータを繰り返し表示させる事ができます。in には of を用いることもできます。

#3-3. 配列を用意する。

app.js

new Vue({
  el: '#app',
  data: {
    active: 0,
    items: ['タブ1', 'タブ2', 'タブ3'], // 追加
  },
});

#3-4. タブメニューに v-for を記載する。

index.html

<ul class="tab__menu">
  <li
    v-for="(item, index) in items"
    :key="index"
    class="tab__item"
    :class="{ 'tab--active': active === index }"
    @click="active = index"
  >
    {{ item }}
  </li>
</ul>