vue实现底部菜单功能

具体代码如下所示：

模板div class=' mui-row ' div class=' mui-col-xs-12 mui-row nav ' div class=' mui-col-xs-4 ' @ tap=' tab 1=1；tab 2=1；选项卡3=1 '路由器-链接到='/推荐' img : src=' http : ' img/Tabicon/选项卡1 '选项卡1 ' .png ' ' @ tap=' tab1=1tab 2=1tab 3=1 '/span class=' mui-tab-label ' @ tap=' tab 1=1；tab 2=1；选项卡3=1“{ 0 }”推荐好课| title } }/span/router-link/div div class=' mui-col-xs-4 ' @ tap=' tab 2=2；tab 1=2；tab3=1 '路由器-链路：到=' { path : '/Broadcast/'(tabNum=tabNum==未定义？0: Abnum)} ' img : src=' http : ' img/Tabicon/tab 2 ' tab 2 ' .png ' ' @ tap=' tab2=2tab 1=2tab 3=1 '/span class=' mui-tab-label ' @ tap=' tab 2=2；tab 1=2；选项卡3=1“{ 0 }”师道直播| title } }/span/router-link/div div class=' mui-col-xs-4 ' @ tap=' tab 3=2；tab 1=2；tab2=1 '路由器-链接到='/my ' img : src=' http : ' img/Tabicon/tab 3 ' tab 3 ' .png ' ' @ tap=' tab 3=2；tab 1=2；tab 2=1 '/span class=' mui-tab-label ' @ tap=' tab 3=2；tab 1=2；选项卡2=1“{ 0 }”我| title } }/span/router-link/div/div/div/模板样式作用域梅罗{背景： # FFF；边框-top:1px实心# F5F 5；} .mui-col-xs-12 .mui-col-xs-4 { text-align : center；高度： 50px} img { position : relative to p :0 px宽度： 30px高度： 30px填充-top : 0；填充-底部： 0；} .mui-tab-label { font-size : 11px；显示器：块；飞越：隐藏；文本-飞越：省略号；边距-top :-7px；} a { color : # B9 b5} .mui-bar {-WebKit-box-shadow : 0 1px rgba(222，219，219，0.85)；box-shadow: 0 0 1px rgba(222，219，219，0.85)；} .梅罗。路由器-链路-精确-活动。路由器-链路-活动{ color: # 3FCDFF}。mui-col-xs-12 .mui-col-xs-4a {高度： 50px显示器：内联块；宽度： 100%;}/stylescript导出默认值{ created() { this .$路线。参数。tab num=0；},挂载(){如果(这.$route.params.tabNum！=' undefined '){ this . tabnu=this .$路线。参数。TabNum//因为这个切换选项卡就小路改变了} else { this。tab num=0；}如果（这个$路线。path=='/my '){ this。tab 3=2；这个。tab 1=2；this.tab2=1 } else if(this .$路线。path=='/Broadcast/'这个。tabnum){//因为这里的小路是随着选项卡切换改变的。所以要写成动态的this.tab2=2this。tab 1=2；这个。tab 3=1 }否则{这。tab 1=1这个。tab 2=1；this.tab3=1 } }，beforeRouteEnter，from，next){//console。log(to)//if(to。参数。db==null){//返回下一个({ name: ' '，params 3360 { id : to。参数。id } })；//}//next()；}，components: {}，data() { return { tabNum:0，tab1:1，tab2:1，tab :1，} }，methods: { }，watch : { ' $ route。params '(tab){//this。Tabnum=这个.$路线。参数。TabNum}、} }/脚本

我的几个图标是这样的。

最终的效果点击那个那个就变成蓝色的。并且进入子页面再切出来他还是蓝色的。

总结

以上所述是小编给大家介绍的某视频剪辑软件实现底部菜单功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！