鼠标悬停v-for元素展示不同子页面

你可以通过在 v-for 元素上绑定 `@mouseover` 事件来实现鼠标悬停展示不同子页面的效果。具体步骤如下：

1. 在数据中定义一个数组，用来存储每个子页面的状态。

data() {
  return {
    pages: [
      { id: 1, title: '页面1', active: false },
      { id: 2, title: '页面2', active: false },
      { id: 3, title: '页面3', active: false }
    ]
  }
}

2. 在模板中使用 v-for 渲染每个子页面，并绑定 `@mouseover` 事件。

<template>
  <div>
    <div v-for="page in pages" :key="page.id" @mouseover="showPage(page.id)">
      {{ page.title }}
    </div>
    <div v-if="activePage">
      <!-- 显示当前激活的子页面内容 -->
    </div>
  </div>
</template>

3. 在事件处理方法中，根据传入的子页面 ID 更新对应的状态，并显示相应的子页面内容。

methods: {
  showPage(id) {
    this.pages.forEach(page => {
      page.active = page.id === id
    })
  }
},
computed: {
  activePage() {
    return this.pages.find(page => page.active)
  }
}

这样，当鼠标悬停在某个子页面上时，它的状态会被更新为激活状态，同时会显示相应的子页面内容。