vue详情页侧边栏高亮

要在Vue的详情页侧边栏中实现高亮效果，你可以使用Vue的条件渲染和动态绑定class的功能。以下是一种实现方式：

首先，在你的Vue组件中，定义一个数据属性来保存当前活动的侧边栏项的索引，比如`activeItem`。

然后，在模板中通过v-for指令遍历侧边栏的选项，并为每个选项绑定一个点击事件。在点击事件处理函数中，将`activeItem`设置为当前点击的选项的索引。

最后，在每个侧边栏选项的class属性中使用条件渲染，当索引值与`activeItem`相等时，添加一个高亮的class名，例如"active"。

示例代码如下：

<template>
  <div>
    <div v-for="(item, index) in sidebarItems" :key="index" @click="setActiveItem(index)" :class="{ active: activeItem === index }">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeItem: 0, // 默认选中第一个侧边栏项
      sidebarItems: ['选项1', '选项2', '选项3'] // 侧边栏选项
    };
  },
  methods: {
    setActiveItem(index) {
      this.activeItem = index;
    }
  }
};
</script>

<style>
.active {
  background-color: #ccc; // 设置高亮的样式
}
</style>

在上述示例代码中，侧边栏选项的容器div使用`v-for`指令根据`sidebarItems`数组动态渲染选项。在绑定class时，使用了条件渲染`{ active: activeItem === index }`，当`activeItem`等于当前索引值时，添加了一个名为"active"的class，这样就能给当前活动的选项添加一个高亮样式。

你可以根据自己的实际情况修改上述代码，例如根据后端数据动态生成侧边栏选项，或者调整高亮的样式。希望对你有所帮助！