toggle-menu vue.js

toggle-menu

<template>
  <div class="header">
    <p
      v-for="(menu, index) in menus"
      :key="menu.id"
      class="header-menu"
      :class="{
        headermenuactive: index === tabindex,
        headermenuno: index !== tabindex,
      }"
      @click="onclick(index)"
    >
      {{ menu.name }}
    </p>
  </div>
</template>
<script>
import axios from "axios"
export default {
  data() {
    return {
      tabindex: 0,
      menus: [
        { id: 1, name: "メニュー1" },
        { id: 2, name: "メニュー2" },
      ],
    }
  },
  methods: {
    onclick(index) {
      this.tabindex = index
    },
  },
}
</script>
<style>
.header {
  width: 100%;
  display: flex;
}
.header-menu {
  width: 50%;
}
.headermenuactive {
  border-bottom: 3px solid #4f68ff;
  color: #595757;
  font-weight: bold;
}
.headermenuno {
  color: #a3a3a3;
  font-weight: normal;
}
</style>