VUE 小白级菜单

最新推荐文章于 2024-09-13 19:21:18 发布

Web Erek

最新推荐文章于 2024-09-13 19:21:18 发布

阅读量97

点赞数

分类专栏： VUE 文章标签： html vue.js javascript

本文链接：https://blog.csdn.net/weixin_45536484/article/details/120041199

版权

VUE 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<ul class="menu">
    <li :class="{active : Index == 1}" @click="changeMenu(1)">菜单</li>
    <li :class="{active : Index == 2}" @click="changeMenu(2)">菜单2</li>
    <li :class="{active : Index == 3}" @click="changeMenu(3)">菜单3</li>
</ul>
<div class="main">
    <div v-if="Index == 1" class="content">菜单1内容区域</div>
    <div v-if="Index == 2" class="content">菜单2内容区域</div>
    <div v-if="Index == 3" class="content">菜单3内容区域</div>
</div>
data(){
    return {
        Index:1
    }
},
methods:{
    changeMenu(index){
        if(index == 1){ this.Index = 1;  }
        else if(index == 2){ this.Index = 2; }
        else if(index == 3){ this.Index = 3 }
    },
}
<style>
    .menu li{
        list-style-type: none;
    }
    .menu .active{
        color: blue;
    }
    .main .content{
        width: 50px;
        background: green;
        border: none;
    }
</style>