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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

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

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

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

それでは参りましょう。

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

タブ切り替えのイメージ

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

こんな感じです。

↓↓↓

vueで作るタブ切り替え

タブ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めちゃくちゃ楽しいですね!!!

もっと勉強しよ笑

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

Vue.jsの記事一覧ページ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です