vue 页面点击图标动态切换

<template>
    <el-container class="box-card">
        <el-aside style="width: 16%;background-color: #ffffff;border: solid 2px #eeeeee">
            <div class="content-header"><i style="margin-left: 25px" class="el-icon-document"></i><span style="margin-left: 25px">任务考核</span>
            </div>
            <div class="content-main" :class="{active:selectIndex===1}"
                 @click="changeSelect(1)"><i class="el-icon-document"></i><span style="margin-left: 10px">项目报送情况</span>
            </div>
            <div class="content-main" :class="{active:selectIndex===2}"
                 @click="changeSelect(2)"><i class="el-icon-document"></i><span style="margin-left: 10px">年度实施进展</span>
            </div>
            <div class="content-main" :class="{active:selectIndex===3}"
                 @click="changeSelect(3)"><i class="el-icon-document"></i><span style="margin-left: 10px">项目进度报送</span>
            </div>
        </el-aside>
        <el-main style="background-color: #ffffff;border: solid 2px #eeeeee;margin-left: 5px">
            <project-report v-if="selectIndex===1"></project-report>
            <project-implement v-if="selectIndex===2"></project-implement>
            <project-progress v-if="selectIndex===3"></project-progress>

        </el-main>
    </el-container>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from 'vue-property-decorator'
    import ProjectReport from "@/types/views/task/report/ProjectReport.vue";
    import ProjectImplement from "@/types/views/task/implement/ProjectImplement.vue";
    import ProjectProgress from "@/types/views/task/progress/ProjectProgress.vue";
    @Component({
        components: {ProjectProgress, ProjectImplement, ProjectReport}
    })
    export default class TaskCheck extends Vue {
        selectIndex: number = 1

        changeSelect(index: number) {
            this.selectIndex = index
        }



    }
</script>

<style scoped>
    .box-card{
        background-color: #FFFFFF;
        height: 100%;
    }
    .content-main {
        height: 40px;
        line-height: 40px;
        border-bottom: solid 2px #eeeeee;
        font-size: 18px;
    }
    .content-header {
        text-align: left;
        height: 50px;
        line-height: 50px;
        border: solid 1px #eeeeee;
        background-color: #0059DF;
        color: #ffffff;
        font-weight: bolder;
        font-size: 20px;
    }
    .active {
        background-color: #1091E9;
        color: #ffffff;
    }

    .el-icon-document {
        font-size: 20px;
    }


</style>