小樽で活動しているフリーのフロントエンドエンジニアです。

Vue.jsでタブを作ってみる

2019-02-14

Vue.jsを勉強してみる

最近フロントエンドの分野で注目されているVue.js。
私も注目していますが、超が付くほどの初心者です。
そこで、jQueryでいつもやっていることをVueでやってみようとして第1回。
今回はタブを試しに作ってみました。

Vueでタブを作るには?

【Vue.js】タブ切り替え

こちらのサイトを参考に作ってみました。

要件は

・アクティブなタブボタンの色を変える
・タブは4つ

以下のような感じになりました

See the Pen tabsample by Saito Keita (@saito-keita) on CodePen.0


解説

アクティブなタブとコンテンツに「active」というクラスを付けます。
CSSでコンテンツのデフォルトに「display:none」とし、非表示にします。
タブの部分にクリックしたら、doClickという関数を呼び出し各番号をセットした上で呼び出します。
v-bindで「active」というクラスをセットします。
クリックしたタブの番号とコンテンツの番号が対になるようにするのがポイントです。
elはタブを動かす親クラスを設定します。

感想

jQueryよりもなれない部分がありましたが、思ったほど難しくはなかったです。
これを実戦で使えればと思いました。
これからも色々調べてみます。

Share Button