vue 播放列表跟随视频播放高亮

在Vue中实现播放列表跟随视频播放高亮的效果可以通过以下步骤实现：

1. 在Vue的data中定义一个变量来保存当前播放的视频索引，例如`currentVideoIndex`。

2. 在播放列表中使用`v-for`指令遍历视频列表，并为每个视频项绑定一个点击事件。

3. 在点击事件中，将当前点击的视频索引赋值给`currentVideoIndex`。

4. 在播放列表中使用`v-bind:class`指令来动态绑定样式，判断当前视频索引是否与`currentVideoIndex`相等，如果相等则添加高亮样式。

下面是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="(video, index) in videoList" :key="index" @click="setCurrentVideo(index)" :class="{ 'active': currentVideoIndex === index }">
        {{ video.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoList: [
        { title: '视频1', url: 'video1.mp4' },
        { title: '视频2', url: 'video2.mp4' },
        { title: '视频3', url: 'video3.mp4' }
      ],
      currentVideoIndex: 0
    };
  },
  methods: {
    setCurrentVideo(index) {
      this.currentVideoIndex = index;
      // 在这里处理视频播放逻辑
    }
  }
};
</script>

<style>
.active {
  background-color: yellow;
}
</style>

在上述代码中，`videoList`是一个包含视频信息的数组，`currentVideoIndex`是当前播放的视频索引。通过点击播放列表中的视频项，可以改变`currentVideoIndex`的值，从而实现高亮效果。