本文实例为大家分享了某视频剪辑软件组件标签栏的具体使用方法，供大家参考，具体内容如下

1.App.vue

！-入口文件-模板div id='app '！-视图层-路由器视图/路由器视图！-底部选项卡-tabbar @ on-index-change=' on-index change ' v-if=' tabbarShow ' tabbar-item selected link='/home ' img slot=' icon ' src=' http :/assets/img/IC _ tab _ home _ normal。png ' img slot=' icon-active ' src=' http :/assets/img/IC _ tab _ home _ active。png ' span slot=' label '首页/span/标签栏-项目标签栏-项目显示-点链接='/AudioBook ' img slot=' icon ' src=' http :/资产/img/IC _ tab _ subject _ normal。png ' img slot=' icon-active ' src=' http :/assets/img/IC _ tab _ subject _ active。png ' span slot=' label '书影音/span/标签栏-项目标签栏-项目徽章=' 2 ' link='/mine ' img slot=' icon ' src=' http :/资产/img/IC _ tab _ profile _ normal。png ' img slot=' icon-active ' src=' http :/资产/img/IC _ tab _ profile _ active。png ' span slot=' label '我的/span/标签栏-项目/标签栏/div/模板脚本/引入vux tabbar组件从“vux”//导入{ Tabbar，TabbarItem }引入状态管理的两个方法从vuex '导入{地图获取器，地图操作}，导出默认{ name: 'app '，组件：{ Tabbar，TabbarItem }，数据(){返回{ select:'Home' } }，//计算属性computed : apgetter([//从吸气剂中获取值tabbarShow' ])，//监听，当路由发生变化的时候执行watch:{ $route(to，from){ if(to)。path=='/' | | to。path=='/home ' | | to。path=='/音频书' | | to。path=='/' mine '){/* * * $ store来自商店对象*派遣向行动发起请求*/这个$商店。调度(' showTabBar ')；}else{ this .$商店。调度(' HideTabbar ')；} } }，方法： { OnIndexchange(NewIndex，oldIndex) { console.log(newIndex，oldIndex)；} } }/脚本样式lang="less "作用域/style2 .效果图

3.其他情况

模板div class=' weui-tab ' div class=' weui-tab _ _ panel ' p v-for=' I in 100 ' { I } }/p/div tab bar！-使用v-link-tab bar-item v-link=' { path : '/component/cell ' } ' img slot=' icon ' src=' http :/资产/演示/图标_导航_按钮。png ' span slot=' label '微信/span /tabbar-item！-使用http链接-标签栏-项目显示-点链接=' https://vux。Li ' img slot=' icon ' src=' http :/资产/演示/图标_导航_消息。png ' span slot=' label '消息/span/tab条-item！-使用vue-路由器链接-标签栏-项目选定链接='/组件/单元' img slot=' icon ' src=' http :/资产/演示/图标_导航_文章。png ' span slot=' label ' explore/span/tab bar-item！-使用vue路由器对象链接-标签栏-项目：链接=' { path : '/组件/单元格' } ' img slot=' icon ' src=' http : './资产/演示/图标_导航_单元格。png ' span slot=' label ' news/span/tab bar-item/tab bar/div/模板脚本从' vux '导出默认{ ready(){ document }导入{ Tabbar，TabbarItem }。queryselector(' body ')。风格。高度=' 100% '文档。queryselector(' html ')。风格。高度=' 100% '文档。queryselector(' app ')。风格。高度=' 100% ' }，组件3360以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。