概要

タブ分けのメニューを作っていきます！
完成図

よくあるタブメニューですね。
今回はマイページをタブ分けすることを想定して実装していきます。

こちらをNuxt.jsで作成していきます！。

セットアップ

npx create-nuxt-app tab

今回はJavaScriptを使用していきます。

早速やってみる

pages/index.vue

<template>
  <div>
    <h1>マイページ</h1>
    <ul>
      <li :class="{ clickBtn: tab === 1 }" @click="tab = 1">お気に入り</li>
      <li :class="{ clickBtn: tab === 2 }" @click="tab = 2">設定</li>
      <li :class="{ clickBtn: tab === 3 }" @click="tab = 3">サブスク</li>
      <li :class="{ clickBtn: tab === 4 }" @click="tab = 4">履歴</li>
    </ul>
    <div class="content">
      <div v-show="tab === 1" class="content-item">
        <p>お気に入りのコンテンツです</p>
      </div>
      <div v-show="tab === 2" class="content-item">
        <p>設定の画面です</p>
      </div>
      <div v-show="tab === 3" class="content-item">
        <p>サブスクのコンテンツです</p>
      </div>
      <div v-show="tab === 4" class="content-item">
        <p>視聴履歴です</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      tab: 1,
    }
  },
}
</script>

<style scoped>
ul {
  list-style: none;
  display: flex;
  text-align: center;
}
li {
  background-color: gray;
  color: white;
  width: 140px;
  height: 50px;
  border: 1px solid white;
  padding: 10px;
}
.content {
  margin-left: 40px;
  width: 560px;
  height: 200px;
  background-color: rgb(218, 218, 218);
}
.clickBtn {
  background-color: rgb(168, 168, 168);
}
</style>

これでもう実装は完了です笑
説明するとまずリストでボタンを簡単に作成しています。
デフォルトのdataでtabを1に設定しておきます。

@click="tab = 番号"

こちらでクリックするとタブの番号を変更するように実装します。
:classでタブの番号がクリックされている場合は背景色をかえるよう設定してあります。

:classはv-vind:classの省略記法です。

もしBならばAのクラスを追加する
:class="{Aのクラス: B}"

といった意味です。

あとは番号に合わせて下にコンテンツをだします。
v-showはdisplay: none;に要素をすることができます。

このように要素の切り替わりが早いものに関してはv-ifではなくv-showを使っていきましょう！！！

いい感じに切り替わってますね！！
お疲れ様でした！