Vue.jsでタブ切り替え（タブメニュー）を作る方法

2019/12/29

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、Vue.jsでタブ切り替え（タブメニュー）を作る方法をご紹介します。

jQueryではindex()メソッド、addClass()、removeClass()などを駆使して実装するタブメニュー。

Vueではどのように実装するか気になって調べてみた時の備忘録です。

それでは参りましょう。

Vue.jsでタブ切り替えを作ろう！
まとめ

Vue.jsでタブ切り替えを作ろう！

タブ切り替えのイメージ

今回実装するタブ切り替えのイメージをまず画像で共有いたします！

こんな感じです。

↓↓↓

タブ2をクリックで下のコンテンツが切り替わります

Vue.jsで作るタブ切り替え

jQueryよりもだいぶシンプルな記述で実装することができました！

Vueの記述はたったこれだけって信じられますか？笑

↓↓

index.js

new Vue({
  el: '#app',
  data: {
    isActive: '1'
  }
})

超シンプル！！

今回のポイントは以下になります！

タブボタン部分は「ラジオボタン」と「labelタグ」で実装
「ラジオボタン」は非表示
Vueのv-modelを使用
タブコンテンツ部分はv-ifで表示非表示

抜き出して見てみます。

■タブボタン部分

index.html

<input type="radio" value="1" id="Tab1" class="Tab-Btn-Radio" v-model="isActive"></input>
<label for="Tab1" class="Tab-Btn-Label">タブ1</label>

■タブコンテンツ部分

index.html

<div class="Tab-Content-List" v-if="isActive == '1'">
  <div class="Tab-Content-List-Item">
    <div class="Tab-Content-List-Item-ImgBox">
      <div class="Tab-Content-List-Item-ImgBox-Img" style="background:url('https://yuyauver98.me/wp-content/uploads/2019/12/20191224.jpg') no-repeat center; background-size:cover;"></div>
    </div>
  </div>
</div>

■CSS ラジオボタン非表示、アクティブのラベルの装飾

index.css

.Tab-Btn-Radio{
  display: none;
}
.Tab-Btn-Radio:checked + .Tab-Btn-Label{
  color: #5bc8ac;
  font-weight: bold;
}

以下、CodePenのサンプルですのでご覧になって下さいまし(^o^)

See the Pen
Vueタブメニュー by 石森裕也 (@yuyaphotograph)
on CodePen.

参考記事

参考 Vue.jsを使って切り替えタブを作る株式会社チップディップ

まとめ

以上、Vue.jsでタブ切り替え（タブメニュー）を作る方法をご紹介しました。

Vueめちゃくちゃ楽しいですね！！！

もっと勉強しよ笑

最後までご高覧いただきありがとうございました！