SOURCE

var app = new Vue({
    el: '#app',
    data() {
        return {
            active: 0,
            list: [
                { key: '菜单1', value: '内容1' },
                { key: '菜单2', value: '内容2' },
                { key: '菜单3', value: '内容3' }
            ]
        }
    },
    methods: {
        navClick(ind) {
            this.active = ind
        }
    }
})

<div id='app'>
	<div class="navList">
		<div @click='navClick(index)' v-for='(item,index) in list' :key='index'>{{item.key}}</div>
	</div>
	<div class="mainList">
		<div :style="{display:(active === index ? 'block':'none')}" v-for='(item,index) in list' :key='index'>{{item.value}}</div>
	</div>
</div>

.navList{
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.navList > div{
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: white;
}
.navList > div:nth-child(1){
    background-color:red;
}
.navList > div:nth-child(2){
    background-color:blue;
}
.navList > div:nth-child(3){
    background-color:green;
}


.mainList{
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    color: white;
}
.mainList > div:nth-child(1){
    display: block;
}
.mainList > div:nth-child(1){
    background-color:red;
}
.mainList > div:nth-child(2){
    background-color:blue;
}
.mainList > div:nth-child(3){
    background-color:green;
}