개요

탭 나누기의 메뉴를 만들어 갑니다!
완성도


자주 있는 탭 메뉴군요.
이번에는 마이 페이지를 탭으로 나누는 것을 상정해 구현해 갑니다.

여기를 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>

이것으로 이미 구현이 완료되었습니다.
설명하면 먼저 목록에서 버튼을 쉽게 만들고 있습니다.
기본 데이터에서 tab을 1로 설정합니다.

@click="tab = 番号"

여기에서 클릭하면 탭의 번호를 변경하도록 구현합니다.
:class에서 탭 번호를 클릭하면 배경색을 바꾸도록 설정되어 있습니다.

:class는 v-vind:class의 약어입니다.

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

같은 의미입니다.

그리고는 번호에 맞추어 아래에 컨텐츠를 내립니다.
v-show는 display: none;에 요소를 할 수 있습니다.

이와 같이 요소의 전환이 빠른 것에 관해서는 v-if가 아니라 v-show를 사용해 갑시다! ! !




좋은 느낌으로 전환하고 있군요! !
수고하셨습니다!