侧边栏 点不同的组件 右边显示出组件相应的页面 是怎么做到的

Question

请教一下，请问就是比如页面有个侧边栏 点不同的组件 右边显示出组件相应的页面 是怎么做到的？然后点不同的组件后它们的相应内容又是怎么消失和出线的呢

Answer 1

原生 还是 框架来实现？

Vue框架还是比较好实现的

<template>
    <div class="container">
        
        <div class="left" >
            <div class="leftTitle" @click="click($event)" v-for="(item,index) in leftList" :key="index" :data-index="index">
                {{item}}
            </div>
        </div>
        <div class="right">
            <div class="title">title{{rightList[currentIndex]}}</div>
            <div class="text">Text{{rightList[currentIndex]}}</div>
        </div>
            
    </div>
</template>

<script>
    export default{
        data(){
            return{
                currentIndex:0,
                leftList:[1,2,3,4,5,6,7,8,9],
                rightList:[1,2,3,4,5,6,7,8,9]
            }
        },
        methods:{
            click(e){
                this.currentIndex = e.currentTarget.dataset.index
                console.log(e.currentTarget.dataset.index);
            }
        }
    }
</script>

<style scoped lang="scss">
    .container{
        display: flex;
        flex-direction: row;
        height: 250px;
        
        .left{
            width: 250px;
            height: 100%;
            overflow: scroll;
            border-right: 1px solid;
            .leftTitle{
                padding: 5px;
                margin-bottom: 5px;
                background-color: $uni-text-color-disable;
            }
        }
        .right{
            padding: 10px;
            .title{
                color: $uni-text-color-grey;
                font-size: 24px;
                font-weight: bold;
            }
            .text{
                padding: 5px;
            }
        }
    }
</style>