技術標籤：demovuehtml

前言：有時候不想用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>