左边侧边导航(标签点击变化右边内容也变化)，右边自适应宽度

本文链接：https://blog.csdn.net/Hanx_/article/details/137832040

<template>
    <div class="muban_content">
        <div class="left_menu">
            <div class="meun" v-for="(item,index) in menu_active" :key="index" :class="{meun_active:item.code==isActiveCode}" @click="menuChange(item,index)">{{item.title}}</div>
        </div>
        <div class="right_content" style="padding-bottom:50px;">
            <div class="right_bigtitle">{{isActiveTitle}}</div>
            <div style="padding-top:30px;">
                <div class="tab-card" style="display:block">嗨，这里是Html</div>
                <div class="tab-card">嗨，这里是Vue</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'muban',
    data () {
        return {
            menu_active: [
                {
                    title: '工作动态',
                    code: '1'
                },
                {
                    title: '通知公告',
                    code: '2'
                },
            ],
            isActiveCode: '1', // 默认选中第一个
            isActiveTitle: '工作动态' // 默认展示第一个的title
        }
    },
    mounted(){

    },
    methods:{
        menuChange(item,index){
            this.isActiveCode = item.code
            var tabCardCollection = document.querySelectorAll(".tab-card"),
            len = tabCardCollection.length;
            for(var i = 0; i < len; i++) {
                tabCardCollection[i].style.display = "none";
            }
            tabCardCollection[index].style.display = "block";
            this.isActiveTitle = item.title
        }
    },
}
</script>
<style>
.muban_content{
    margin-top: 29px;
    display:flex;
    /* flex布局，左侧固定宽度，右侧自适应 */
}
.left_menu{
    width: 200px;
    min-width: 200px;
    border: 1px solid rgba(0,0,0,0.15);
}
.meun{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.meun_active{
    /* 左侧标签 选中样式 */
    background: #B81C22;
    color: #fff;
}
.right_content{
    flex:1;
    margin-left: 40px;
    min-width: 400px;
}
.right_bigtitle{
    width: 100%;
    font-size: 30px;
    padding-bottom: 21px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.tab-card {
    display: none;
}
</style>

左边侧边导航，点击切换右边内容对应变化

右边自适应宽度，用flex布局