具体代码如下所示：
{{"推荐好课" | title}} {{"师道直播" | title}} {{"我" | title}} .mui-row { background: #FFF; border-top:1px solid #F5F5F5; } .mui-col-xs-12 .mui-col-xs-4 { text-align: center; height: 50px; } img{position:relative; top:0px; width: 30px; height: 30px; padding-top: 0; padding-bottom: 0; } .mui-tab-label{ font-size: 11px; display: block; overflow: hidden; text-overflow: ellipsis; margin-top: -7px; } a{color:#b9b5b5;} .mui-bar{ -webkit-box-shadow: 0 0 1px rgba(222, 219, 219, 0.85); box-shadow: 0 0 1px rgba(222, 219, 219, 0.85); } .mui-row .router-link-exact-active.router-link-active{ color:#3FCDFF; } .mui-col-xs-12 .mui-col-xs-4 a{height: 50px; display: inline-block; width: 100%;}
我的几个图标是这样的。
最终的效果点击那个那个就变成蓝色的。并且进入子页面再切出来他还是蓝色的。
总结
以上所述是小编给大家介绍的vue实现底部菜单功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！
以上就是vue实现底部菜单功能的详细内容，更多请关注本站其它相关文章！
