轮询高亮多块内容

1.定义所需参数：（存储定时器的变量，需要高亮展示的数组）

存储定时器的 ID

intervalId: null ，

"items": [
      {
        "title": "标题1",
        "details": [
          {
            "name": "描述1"
          },
          {
            "name": "描述2"
          },
          {
            "name": "描述3"
          }
        ]
      },
      {
        "title": "标题2",
        "details": [
          {
            "name": "描述1"
          },
          {
            "name": "描述2"
          },
          {
            "name": "描述3"
          }
        ]
      },
      {
        "title": "标题3",
        "details": [
          {
            "name": "描述1"
          },
          {
            "name": "描述2"
          },
          {
            "name": "描述3"
          }
        ]
      },
      {
        "title": "标题4",
        "details": [
          {
            "name": "描述1"
          },
          {
            "name": "描述2"
          },
          {
            "name": "描述3"
          }
        ]
      },
      {
        "title": "标题5",
        "details": [
          {
            "name": "描述1"
          },
          {
            "name": "描述2"
          }
        ]
      }
    ]

2.设置定时任务，创建定时方法 

this.intervalId = setInterval(() => {
    
  this.currentIndex = (this.currentIndex + 1) % this.items.length

}, 5000) // 每秒更新一次高亮索引

3.设置 清除定时任务方法

stopHighlighting() {

   clearInterval(this.intervalId) // 清除定时器

}

4.页面初始加载时  调用定时任务 

mounted() {

  this.startHighlighting()

 },

5.在页面销毁之前  停止定时任务

beforeDestroy() {

    this.stopHighlighting()

  }

6.代码部分

<div v-for="(item, index) in items" :key="index">
      <!-- 高亮部分 -->
      <div :class="[{ highlight:currentIndex === index},`details`+index,`detailsCom`]">
        <ul v-for="(e,eindex) in item.details" :key="eindex">
          <li>{{e.name}}</li>
        </ul>
      </div>
</div>

.highlight {
    background-color: RGBA(23, 40, 90, 0.6);
  }