vuequanxain/src/pages/mobikeMarket/sends/index.vue

<template>
  <div class="box">
    <template v-for="(item, index) in title">
      <span
        :class="{ active: index === currentIndex, title: true }"
        @click="changeColor(index)"
        >{{ item }}</span
      >
      <el-divider
        v-if="index < title.length - 1"
        direction="vertical"
      ></el-divider>
    </template>
    <div class="">
      {{ msg }}
    </div>
  </div>
</template>

<script>
export default {
  name: "goods-classify",
  data() {
    return {
      msg: "000000",
      title: ["待提交", "待审核", "待发送", "历史"],
      currentIndex: 0,
    };
  },
  methods: {
    changeColor(index) {
      this.currentIndex = index;
      switch (index) {
        case 0:
          this.msg = "000000";
          break;
        case 1:
          this.msg = "11111";
          break;
        case 2:
          this.msg = "2222222";
          break;
        case 3:
          this.msg = "3333333";
          break;
        default:
          this.msg = "000000";
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 100vh;
  width: 100%;
  .title {
    display: inline-block;
    font-size: 17px;
  }
  .el-divider--vertical {
    margin: 0 34px;
  }
  .active {
    color: red;
  }
}
</style>