vue之el-menu-item导航栏菜单选中后背景颜色改变的代码

在使用VUE框架做网站建设时想要实现导航栏中的菜单被选中后改变背景颜色以便和其他的栏目做区分，经过查看官方文档和结果网上的搜索内容，最终实现了这个效果，现分享给大家参考。

首先我们来先看最终实现的效果：

接着我们来看实现的代码过程：

修改element导航栏选中时的背景色，可以通过设置 .el-menu-item.is-active 选择器的样式属性 【background-color】使用 !important 使得优先级最大。

如下：

.el-menu-item.is-active {
      background-color: #3370ff !important;
      color: #fff;
      span {
        color: #fff !important;
      }
    }

修改element导航栏选中时的背景色，通过浏览器选中导航栏查看可知修改样式.el-menu-item.is-active即可。

.el-menu-item.is-active {
  background: #247bb4 !important;
}

好了，通过以上代码就顺利的实现我们想要的效果，希望对大家有所帮助！