vue 手写一个简单的菜单栏

vue 手写一个简单的菜单栏练练手

<template>
  <div class="index">
    <!-- menuBar -->
    <div class="menubar">
      <ul>
        <li @click="bar = 1" :class="{ active: bar == 1 }">全部</li>
        <li @click="bar = 2" :class="{ active: bar == 2 }">读城</li>
        <li @click="bar = 3" :class="{ active: bar == 3 }">创新</li>
        <li @click="bar = 4" :class="{ active: bar == 4 }">汇聚</li>
        <li @click="bar = 5" :class="{ active: bar == 5 }">栖居</li>
      </ul>
    </div>
    <div class="tabs">
      <div v-show="bar == 1" class="content"></div>
    </div>
    <div v-show="bar == 2">
      <div>内容2</div>
    </div>
  </div>
</template>

<script>
import Component from "vue-class-component";
import { Prop, Watch, Vue } from "vue-property-decorator";
@Component
export default class Index extends Vue {
  bar = 1;
}
</script>

<style lang="scss">
.index {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("/style/images/picture_bg.png") no-repeat;
  background-position: top;
  background-size: 100% auto;

  .menubar > ul {
    width: 100%;
    height: 0.46rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    padding: 0.5rem 0;
    li {
      line-height: 0.2rem;
      letter-spacing: 3px;
      margin: 0 0.4rem 0rem 0.4rem;
      padding: 0 0rem 0.16rem 0rem;
      color: #fff;
      border-bottom: 2px solid transparent;
    }
    .active {
      color: #facd89;
      border-bottom: 2px solid #facd89;
    }
  }
}
</style>