vue识别显示内容并动态更改导航栏选中项目

在Vue中，可以通过使用动态类绑定来实现根据显示内容来动态更改导航栏选中项目的效果。

首先，在导航栏中定义一个变量来存储当前选中的项目，例如：

<template>
  <div>
    <ul>
      <li :class="{ 'active': activeItem === 'home' }">Home</li>
      <li :class="{ 'active': activeItem === 'about' }">About</li>
      <li :class="{ 'active': activeItem === 'contact' }">Contact</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeItem: 'home'
    };
  }
};
</script>

在上面的代码中，我们定义了一个activeItem变量来存储当前选中的项目，默认为home。然后，使用动态类绑定来为选中的项目添加.active类。

接下来，在组件中根据显示内容来动态更改activeItem的值。例如：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Home',
      content: 'Welcome to my home page.'
    };
  },
  watch: {
    title(newTitle) {
      if (newTitle === 'Home') {
        this.activeItem = 'home';
      } else if (newTitle === 'About') {
        this.activeItem = 'about';
      } else if (newTitle === 'Contact') {
        this.activeItem = 'contact';
      }
    }
  }
};
</script>

在上面的代码中，我们使用了watch来监测title的变化。当title变化时，我们根据其值来动态更改activeItem的值。

这样，当用户浏览不同页面时，导航栏会根据显示内容动态更改选中项目的效果。