实现导航栏切换样式Vue3＜script setup＞

点击切换效果图：

话不多说  代码如下：

<script setup>

import headerVue from "../components/header.vue";

import {ref} from 'vue'

const btn = ref(false);

const showMenu = ref(false);

const menuItems = ref([

  {

    label: "XXXX",

    imgSrc: "./image/1.png",

    selectedImg: "./image/1-1.png",

  },

  {

    label: "XXXX",

    imgSrc: "./image/2.png",

    selectedImg: "./image/2-2.png",

  },

  {

    label: "XXXX",

    imgSrc: "./image/3.png",

    selectedImg: "./image/3-3.png",

  },

  {

    label: "XXXX",

    imgSrc: "./image/4.png",

    selectedImg: "./image/4-4.png",

  },

  {

    label: "XXXX",

    imgSrc: "./image/5.png",

    selectedImg: "./image/5-5.png",

  },

  {

    label: "XXXX",

    imgSrc: "./image/6.png",

    selectedImg: "./image/6-6.png",

  },

  {

    label: "XXXX",

    imgSrc: "./image/7.png",

    selectedImg: "./image/7-7.png",

  },

  {

    label: "XXXX",

    imgSrc: "./image/8.png",

    selectedImg: "./image/8-8.png",

  },

  {

    label: "XXXX",

    imgSrc: "./image/9.png",

    selectedImg: "./image/9-9.png",

  },

]);

let selectedItemIndex = ref(null);

const toggleColor = (index) => {

  if (selectedItemIndex.value === index) {

    return;

  }

   

  selectedItemIndex.value = index;

};

<template>

    <div class="menu">

      <div

        class="menu_item"

        v-for="(item, index) in menuItems"

        :key="index"

        @click="toggleColor(index)"

      >

        <img

          :src="selectedItemIndex === index ? item.selectedImg : item.imgSrc"

          alt=""

        />

        <p :class="{ selected: selectedItemIndex === index }">

          {{ item.label }}

        </p>

      </div>

    </div>

</template>

.menu {

    left: 33%;

    width: 33%;

    height: 40px;

    display: flex;

    justify-content: space-around;

    align-items: center;

    position: absolute;

    bottom: 60px;

    z-index: 9999;

    .menu_item {

      width: 100%;

      height: 100%;

      display: flex;

      justify-content: space-around;

      align-items: center;

      flex-direction: column;

      p {

        font-size: 10px;

        color: #fff;

      }

      .selected {

        color: #d19858;

      }

    }

    img {

      width: 30px;

      height: 30px;

    }

  }

 想实现页面跳转添加路由即可。