vue导航条页面切换

以下是使用Vue实现导航条页面切换的示例代码：

<template>
  <div>
    <nav>
      <ul>
        <li :class="{ active: currentIndex === 0 }" @click="changePage(0)">学校新闻</li>
        <li :class="{ active: currentIndex === 1 }" @click="changePage(1)">就业新闻</li>
        <li :class="{ active: currentIndex === 2 }" @click="changePage(2)">校园活动</li>
      </ul>
    </nav>
    <div v-if="currentIndex === 0">
      <h2>学校新闻</h2>
      <!-- 学校新闻内容 -->
    </div>
    <div v-if="currentIndex === 1">
      <h2>就业新闻</h2>
      <!-- 就业新闻内容 -->
    </div>
    <div v-if="currentIndex === 2">
      <h2>校园活动</h2>
      <!-- 校园活动内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0, // 当前选中的页面下标
    };
  },
  methods: {
    changePage(index) {
      this.currentIndex = index; // 切换页面
    },
  },
};
</script>

<style>
nav ul li {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

nav ul li.active {
  background-color: #ccc;
}
</style>

在上述代码中，我们使用了一个`currentIndex`变量来表示当前选中的页面下标。通过点击导航条中的不同选项，我们可以调用`changePage`方法来切换页面，并根据`currentIndex`的值来显示对应的内容。同时，我们使用了动态绑定`class`属性来为当前选中的选项添加样式。