可以通过以下步骤实现:

  1. 给每个li绑定一个鼠标移入事件,可以使用@mouseover指令或者v-on:mouseover绑定事件。

  2. 在事件处理函数中,根据当前鼠标停留的li的索引值,切换右边的轮播图。

  3. 切换轮播图可以使用v-if指令控制哪个轮播图显示,或者动态改变轮播图的数据。

示例代码:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @mouseover="changeCarousel(index)">
        {{ item }}
      </li>
    </ul>
    <div>
      <div v-if="activeIndex === 0">
        <!-- 第一组轮播图 -->
      </div>
      <div v-else>
        <!-- 第二组轮播图 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['选项1', '选项2'],
      activeIndex: 0 // 默认显示第一组轮播图
    }
  },
  methods: {
    changeCarousel(index) {
      if (index === 0) {
        this.activeIndex = 0
      } else {
        this.activeIndex = 1
      }
    }
  }
}
</script>

原文地址: https://www.cveoy.top/t/topic/voY 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录