こんにちは。
ゆうや(@yuyaphotograph)です!
本記事では、Vue.jsでタブ切り替え(タブメニュー)を作る方法をご紹介します。
jQueryではindex()メソッド、addClass()、removeClass()などを駆使して実装するタブメニュー。
Vueではどのように実装するか気になって調べてみた時の備忘録です。
それでは参りましょう。
Vue.jsでタブ切り替えを作ろう!
タブ切り替えのイメージ
今回実装するタブ切り替えのイメージをまず画像で共有いたします!
こんな感じです。
↓↓↓

タブ2をクリックで下のコンテンツが切り替わります
Vue.jsで作るタブ切り替え
jQueryよりもだいぶシンプルな記述で実装することができました!
Vueの記述はたったこれだけって信じられますか?笑
↓↓
index.js
超シンプル!!
今回のポイントは以下になります!
- タブボタン部分は「ラジオボタン」と「labelタグ」で実装
- 「ラジオボタン」は非表示
- Vueのv-modelを使用
- タブコンテンツ部分はv-ifで表示非表示
抜き出して見てみます。
■タブボタン部分
index.html
■タブコンテンツ部分
index.html
■CSS ラジオボタン非表示、アクティブのラベルの装飾
index.css
以下、CodePenのサンプルですのでご覧になって下さいまし(^o^)
参考記事
参考 Vue.jsを使って切り替えタブを作る株式会社チップディップまとめ
以上、Vue.jsでタブ切り替え(タブメニュー)を作る方法をご紹介しました。
Vueめちゃくちゃ楽しいですね!!!
もっと勉強しよ笑
最後までご高覧いただきありがとうございました!