vue3制作导航切换,点击导航条中的导航项目,当前被点击的项目内容会显示在下方绿色方块中,并且当前被点击项目的背景颜色变成粉色，使用v-for指令遍历显示导航项目，使用v-on添加点击事件，使用v-bind指令动态绑定class和key属性

在 Vue3 中，你可以通过模板、数据驱动和事件绑定来实现这样的导航切换效果。首先，假设你有一个数组 `navItems` 存储了导航菜单的数据，每个项目都有一个 `name` 和 `content` 属性。

1. 定义组件结构：

<template>
  <div class="container">
    <ul class="navbar">
      <li v-for="(item, index) in navItems" :key="index" @click="toggleContent(index)">
        <router-link :to="{ name: item.name }">{{ item.name }}</router-link>
        <span class="selected-item" v-bind:class="{ pinkBg: isSelected(index) }"></span>
      </li>
    </ul>
    <div class="content" ref="contentBox">
      <router-view></router-view>
    </div>
  </div>
</template>

2. 定义数据状态：

<script>
export default {
  data() {
    return {
      navItems: [
        { name: 'Home', content: '这是首页的内容' },
        { name: 'About', content: '这是关于页的内容' },
        // 更多菜单项...
      ],
      selectedItemIndex: null,
    };
  },
  methods: {
    toggleContent(index) {
      this.selectedItemIndex = (this.selectedItemIndex === index) ? null : index;
      this.$refs.contentBox.textContent = this.navItems[this.selectedItemIndex].content;
    },
    isSelected(index) {
      return this.selectedItemIndex === index;
    },
  },
};
</script>

在这个例子中，我们使用 `v-for` 指令循环遍历 `navItems`，并为每个导航项添加点击事件 `@click="toggleContent(index)`。当导航项被点击时，`toggleContent` 方法会更新 `selectedItemIndex` 并设置 `contentBox` 的内容。

`v-bind:class="{ pinkBg: isSelected(index) }"` 用于动态绑定 CSS 类名，如果当前被点击的是 `pinkBg` 类对应的索引，那么该导航项的背景色会被设置为粉色。