Vue左边与右边内容相关联

通过:class把左边和右边的内容关联起来

<template>
  <div>
    <!-- 主体 -->
    <div class="con">
      <!-- 左边 -->
      <el-card class="box-card left">
        <div
          class="kc items"
          @click="handleclick(1)"
          :class="{ active: actnum == 1 }"
        >
          <i class="el-icon-document"></i> 我的课程
        </div>
        <div
          class="rw items"
          @click="handleclick(2)"
          :class="{ active: actnum == 2 }"
        >
          <i class="el-icon-document"></i> 我的任务
        </div>
        <div class="bj" :class="{ active: actnum == 3 }">
          <i class="el-icon-document"></i> 我的班级
        </div>
      </el-card>
      <!-- 右边 -->
      <el-card class="box-card right">
        <!-- 我的课程 -->
        <!-- v-if="actnum == 1" 与 左边的actnum 相对应 -->
        <Kecheng v-if="actnum == 1"></Kecheng>
        <!-- 我的任务 -->
        <Renwu v-if="actnum == 2"></Renwu>
      </el-card>
    </div>
  </div>
</template>

<script>
import Kecheng from "./kecheng/index";
import Renwu from "./renwu/index";
export default {
  data() {
    return {
      actnum: 1,

      classAfter: "课后作业",
      classing: "课中作业",
      lai: "来源：趣味编程（Python） 2.5.1",
      time: "创建时间：2021年02月23日 12:31",
    };
  },
  methods: {
    handleclick(e) {
      this.actnum = e;
    },
  },
  components: {
    Kecheng,
    Renwu,
  },
};
</script>

<style lang="scss" scoped>
.items {
  cursor: pointer;
}
.active {
  color: $--color;
}
.con {
  width: 1366px;
  height: calc(100vh - 354px);
  margin: 16px auto;
  text-align: center;
  .left {
    width: 206px;
    // height: 144px;
    // height: 200px;
    // &:hover {
    .kc {
      margin-top: 20px;
      margin-left: -80px;
      &:hover {
        cursor: pointer;
      }
    }
    .rw {
      margin-top: 20px;
      margin-left: -80px;
      &:hover {
        cursor: pointer;
      }
    }
    .bj {
      margin-top: 20px;
      margin-left: -80px;
      margin-bottom: 20px;
      &:hover {
        cursor: pointer;
      }
    }
    // }
  }
  .right {
    width: 1078px;
    // width: calc(100vw - 200px);
    margin-left: 222px;
    margin-top: -144px;
    // 我的课程

    // 我的任务
  }
  .el-pagination {
    margin-top: 100px;
  }
}
</style>