vue实现hover左侧导航菜单 mouseenter（移入） mouseleave（移出）

前言：有时候不想用ui框架，就可以参考参考
效果如图：

代码：

<template>
  <div class="my">
    <div class="container">
      <div class="nav_box">
        <ul class="item_list">
          <li
            class="item"
            @mouseenter="enter(i + 1)"
            @mouseleave="leave(i + 1)"
            v-for="(item, i) in nav_list"
            :key="i"
          >
            {
    
    {
    
     item }}
          </li>
        </ul>
      </div>
      <div class="content_box">
        <div class="nav">
          <ul>
            <li
              class="son"
              v-for="(item, i) in content_list"
              :key="i"
              v-show="value == i + 1"
            >
              右侧——{
    
    {
    
     item }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      value: 1,
      nav_list: ["导航1", "导航2", "导航3", "导航4"],
      content_list: ["内容1", "内容2", "内容3", "内容4"],
    };
  },
  methods: {
    
    
    enter(val) {
    
    
      this.value = val;
    },
    // 鼠标离开时
    leave(val) {
    
    
      // 这里填默认值
      this.value = 1;
    },
  },
};
</script>
<style lang="scss">
.my {
    
    
  .container {
    
    
    width: 1024px;
    margin: 0 auto;
    background-color: azure;
    border: 1px solid red;
    display: flex;
    .nav_box {
    
    
      .item {
    
    
        font-size: 20px;
        width: 300px;
        height: 40px;
        background: #444;
        color: aqua;
        margin: 10px;
        line-height: 40px;
        text-align: center;
        &:hover {
    
    
          background-color: rosybrown;
        }
      }
    }

    .content_box {
    
    
      background: #fff;
      width: 100%;
      padding: 10px;
      height: auto;
      .son {
    
    
        font-size: 50px;
        text-align: center;
        display: block;
        height: 200px;
        line-height: 200px;
      }
    }
  }
}
</style>