Vue.js 侧边栏鼠标悬停显示内容：简单易懂的实现方法

本教程将教你如何使用 Vue.js、CSS 和 JavaScript 创建一个简单的侧边栏，当鼠标悬停在左侧菜单栏上时，右侧内容框会显示对应的内容。

1. HTML 结构

首先，在 HTML 中添加一个侧边栏容器和一个内容容器：

<div id='sidebar'>
  <ul>
    <li class='menu-item' @mouseover='setActive(0)'>菜单1</li>
    <li class='menu-item' @mouseover='setActive(1)'>菜单2</li>
    <li class='menu-item' @mouseover='setActive(2)'>菜单3</li>
  </ul>
</div>
<div id='content'>
  <div class='content-item'>内容1</div>
  <div class='content-item'>内容2</div>
  <div class='content-item'>内容3</div>
</div>

2. CSS 样式

接下来，在 CSS 中设置侧边栏和内容容器的样式：

#sidebar {
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  float: left;
}

#sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#sidebar .menu-item {
  padding: 10px;
  cursor: pointer;
}

#sidebar .menu-item:hover {
  background-color: #ddd;
}

#content {
  margin-left: 200px;
  height: 100%;
}

.content-item {
  display: none;
}

.active {
  display: block;
}

3. Vue.js 实现

使用 Vue.js 实现鼠标悬停左侧菜单栏，右侧内容框显示对应内容的功能：

new Vue({
  el: '#sidebar',
  data: {
    activeIndex: 0
  },
  methods: {
    setActive(index) {
      this.activeIndex = index;
    }
  }
});

new Vue({
  el: '#content',
  computed: {
    activeItem() {
      return this.$el.getElementsByClassName('content-item')[this.$parent.activeIndex];
    }
  },
  watch: {
    activeItem() {
      const contentItems = this.$el.getElementsByClassName('content-item');
      for (let i = 0; i < contentItems.length; i++) {
        contentItems[i].classList.remove('active');
      }
      this.activeItem.classList.add('active');
    }
  }
});

4. 绑定事件

最后，在侧边栏中的菜单项上绑定鼠标悬停事件，并调用 setActive 方法：

<li class='menu-item' @mouseover='setActive(0)'>菜单1</li>
<li class='menu-item' @mouseover='setActive(1)'>菜单2</li>
<li class='menu-item' @mouseover='setActive(2)'>菜单3</li>

完成！

现在，当鼠标悬停在某个菜单项上时，对应的内容项就会显示在右侧的内容框中。你可以在此基础上进行扩展和自定义，实现更复杂的功能。