Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Vue.js 2020.08.27

Vue.jsでタブ切り替え機能をシンプルに実装してみる

Tags: ,,

以前にjQueryを使ってタブ切り替え機能を実装してみた記事(jQueryでベーシックなタブパネルメニューを実装する)を公開しましたが、最近ではVue.jsもよく使われており、今回はVue.jsでタブ切り替え機能を作成してみたいと思います。Vue.jsで作成することで、よりシンプルにわかりやすく、少ないメソッドで実装することができますのでコードの見通しも良くなり保守性にも優れます。

 

早速コードを見ていきます。まずはJavaScriptからですが、CDNやライブラリを読み込む場合は下記のようにVueインスタンスを作成し、その中にオプションを書いていきます。もしくはVueCLIやNuxt.jsなどで単一コンポーネントを使う場合には.vueファイルの中のscriptタグの中に書いていきます。まずは対象となるエレメントを定義します。そしてdataオプションにタブのラベルとコンテンツを配列の値で持たせておきます。さらに現在表示されているタブのインデックスを表す数値も用意しておきます。デフォルトでは最初のタブが表示されている形です。

【JavaScript(Vue)】

const vueModel = new Vue({
  el: '#app',
  data: {
    labels: [
      'Tab1', 'Tab2', 'Tab3', 'Tab4'
    ],
    panels: [
      'Tab1のコンテンツが入ります',
      'Tab2のコンテンツが入ります',
      'Tab3のコンテンツが入ります',
      'Tab4のコンテンツが入ります'
    ],
    current: 0
  },
  methods: {
    tabSelect(index) {
      this.current = index;
    }
  }
});

 

最後にmethodsのオプションでタブをクリックした時の処理を記述します。引数を取っておりクリックしたタブ要素のインデックスを受け取るようにしています。こうすることでどのタブがクリックしたかがわかるようになっています。受け取ったインデックスをdataオプションに定義している現在のタブを表す変数に格納することで表示されているタブの情報を更新します。

 

続いてHTMLです。最近はPugを使うことが多いのでPugで書いていますが、基本的にHTMLも同じようになります。それぞれタブのラベル部分とコンテンツ部分を用意し、dataオプションで定義した配列データをv-forで展開してきます。HTMLの中にはその値が出力されるようにしておきます。そしてdataオプションで保持しているインデックスの情報と、タブ要素のインデックスが同じ場合に表示されていることを示すclass名がつくようにしておきます。最後にラベル部分にはmethodsで定義した選択されたタブを更新する処理をクリックイベントで呼び出すようにします。

【Pug】※一部抜粋

div#app
  ul.tab-label
    li(v-for="(label, index) in labels" :key="index" :class="current === index ? 'current' : ''" @click="tabSelect(index)").
      {{ label }}
  ul.tab-panel
    li(v-for="(panel, index) in panels" :key="index" :class="current === index ? 'current' : ''").
      {{ panel }}

 

今回はタブのコンテンツにテキストデータのみを入れる想定ですので配列データの値を出力していますが、もしHTMLや特定のコンポーネントを使う場合には下記のようにv-ifなどでタブのインデックスに合わせて出力するHTMLやコンポーネント切り替えられるようにしておくといいかと思います。

li(v-for="(panel, index) in panels" :key="index" :class="current === index ? 'current' : ''").
  div(v-if="current === 0").
    Tab1のコンテンツが入ります
  div(v-else-if="current === 1").
    Tab2のコンテンツが入ります
  div(v-else-if="current === 2").
    Tab3のコンテンツが入ります
  ..........

 

最後にCSSでタブの切り替えができるように表示を調整していきます。選択中のタブとそうでないものをしっかりとわかるようにしておきます。

【Sass(SASS)】※一部抜粋

.tab-label
  display: flex
  flex-wrap: nowrap
  li
    padding: 16px
    background: #ddd
    &.current
      background: coral
      color: white
.tab-panel
  li
    width: 100%
    padding: 16px
    border: 4px solid coral
    &:not(.current)
      display: none

 

これでVue.jsでタブ切り替え機能を実装することができました。今回作成したサンプルは下記のようになります。ご参考にどうぞ。

 

See the Pen
tabmenu_on_vue
by designsupply (@designsupply)
on CodePen.

 


 

タブ切り替え機能はウェブサイトのUIでもよく見かけますが、いろんな実装方法があるかと思います。jQueryなどを使って実装するケースもありますが、Vue.jsを使うことでよりシンプルにわかりやすく、さらに保守性も優れたように作成することができるのでオススメです。ぜひ一度試してみてください。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?