vue 两级联动，点击变色

<template>
  <div>
    <div class="indexheard">
      <div class="index_type">
        <label class="titlestyle">第一级</label>
        <div class="typediv">
          <label
            class="typestyle"
            v-for="(item, index) in typelist"
            v-bind:class="{ type_clable: FirstIndex === index }"
            :key="index"
            @click="FirstLevelChange(index, item)"
            >{{ item.menu_name }}</label
          >
        </div>
      </div>
      <br />
      <div style="margin-top: 7px;">
        <label class="titlestyle" style>第二级</label>
        <div class="typediv1">
          <label
            class="typestyle"
            v-for="(item, index) in typelist[FirstIndex].node"
            :key="index"
            v-bind:class="{ type_clable: SecondIndex === index }"
            @click="SecondLevelChange(index, item)"
            >{{ item.menu_name }}</label
          >
        </div>
      </div>
      <province ref="pro" v-show="isshow" />
    </div>
  </div>
</template>

<script>
export default {
  name: "clable",
  data() {
    return {
      typelist: [
        {
          id: 4,
          menu_name: "颜色",
          node: [
            {
              id: 5,
              menu_name: "红色"
            },
            {
              id: 6,
              menu_name: "蓝色"
            },
            {
              id: 7,
              menu_name: "白色"
            },
            {
              id: 8,
              menu_name: "灰色"
            },
            
          ]
        },
        {
          id: 1,
          menu_name: "天气",
          node: [
            {
              id: 13,
              menu_name: "阴天"
            },
            {
              id: 14,
              menu_name: "多云"
            },
            {
              id: 15,
              menu_name: "晴天"
            },
            {
              id: 16,
              menu_name: "小雨"
            },
         
          ]
        }
      ],
      FirstIndex: 0,
      SecondIndex: 0,
    };
  },
  methods: {
    //一级分类点击事件
    FirstLevelChange(index, item) {
      this.FirstIndex = index;
      this.SecondIndex = 0;
    },
    //二级分类点击事件
    SecondLevelChange(index, item) {
      this.SecondIndex = index;
    }
  },
};
</script>

<style lang="scss" scoped>
.indexheard {
  margin: 21px 5px 0 8%;
  height: 64px;
}
.typestyle {
  color: rgba(112, 112, 112, 1);
  font-size: 14px;
  margin-right: 20px;
}
.typediv {
  float: left;
  margin: 5px 0 0 20px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: rgba(147, 147, 147, 1);
}
.typediv1 {
  float: left;
  margin: 5px 0 0 10px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: rgba(147, 147, 147, 1);
}
.titlestyle {
  float: left;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #2d2d2d;
  opacity: 1;
  margin-top: 5px;
}
.updata_lable {
  color: $base-color;
  font-size: 14px;
  margin-right: 20px;
}
.type_clable {
  color: #2d2d2d;
  font-family: PingFang SC;
  font-weight: bold;
}
</style>

在点击事件中注意点击的时候，数据的来回切换就行！！！