菜单 选中 和未选中的 点击效果

 效果：

            <div class="roleLeft">
                <div class="head-tit ellipsis">角色类型</div>
                <ul>
                    <li 
                        v-for="(item,index) in roleList" 
                        :key="index"
                        @click="clickNav(index)"
                        class="navSty"
                        :class="{cur:index==current}">
                        {{item.name}}
                    </li>
                </ul>
            </div>

菜单 默认选中第一个；

 

data(){

    return {
                current:0,
                roleList:[
                    {
                        id:1,
                        name:"超级管理员"
                    },{
                        id:2,
                        name:"管理端管理员"
                    },{
                        id:3,
                        name:"管理端普通用户"
                    },{
                        id:4,
                        name:"生产端用户"
                    },{
                        id:5,
                        name:"传播端用户"
                    },
                ],
    }
},



methods:{
    clickNav(index){
        this.current = index;
    },
},

css:

 

.roleLeft{
            padding:0 10px 0 20px;
            min-width: 200px;
            max-width: 200px;
            flex: 0 0 200px;
            font-size:14px;
            border-right:1px solid #ccc;
            background: rgb(255, 255, 255);
            .head-tit{
                font-weight:bold;
                font-size:16px;
                line-height:55px;
                border-bottom: 1px solid #e8eaec;
                color: #17233d;
                width:100%;
            }
            .navSty{
                margin-top:3px;
                height:35px;
                line-height:35px;
                background:#fff;
                margin-right:10px;
                color:#222;
                padding:0 10px;
                cursor:pointer;
                &.cur{
                    color:#2d8cf0;
                    font-weight: bold;
                    background-color: fade(@cur-color,5%);
                }
            }
            
}