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

在Vue.js中制作导航切换功能，首先需要创建一个组件，比如`NavigationItem`，包含项目名称、点击状态和颜色样式。步骤如下：

1. **HTML结构**:

<template>
  <li class="nav-item" v-bind:class="{ active: isActive(item.id) }"
      v-on:click="toggleActive(item.id)">
    <a :href="#" :style="{ backgroundColor: item.color || '#E35885' }">{{ item.name }}</a>
  </li>
</template>

在这里，`isActive`函数用于判断是否是当前激活项，`toggleActive`则处理点击事件并更新状态。

2. **数据模型**:

export default {
  data() {
    return {
      items: [
        { name: '首页', id: 1, color: '#E35885' },
        // 更多导航项目...
      ],
      activeId: null,
    };
  },
  methods: {
    toggleActive(id) {
      this.activeId = id;
    },
    isActive(id) {
      return this.activeId === id;
    },
  },
};

3. **CSS样式**:

.nav-item {
  display: inline-block;
}

.nav-item.active {
  background-color: red; /* 红色背景 */
}

使用`v-for`指令将items数组渲染到导航栏上：

<nav>
  <ul class="nav">
    <li v-for="(item, index) in items" :key="index" :ref="'navItem' + index">
      <NavigationItem :item="item" />
    </li>
  </ul>
</nav>

<div class="content" ref="content">
  <!-- 当前内容区域 -->
</div>

然后在JavaScript中，你可以监听导航项目的点击事件，根据目标元素获取其内容区域，并设置内容。