vue tab实现绑定动态组件，选中可变色的底部菜单

原理：html标签触发方法执行，然后切换图片和标签样式，同时改变动态组件

首先html部分要有可点击触发方法的标签，并放置变化前后的图片

<div class="app-tabs">

<div id="app_tab1" class="app-tab" @click="toggleTab('My','imgShow1')">
<a>
<img v-show="imgShow1" class="app-img" src="./assets/my.png" /><img class="app-img" v-show="!imgShow1" src="./assets/my2.png" /><br /><p id="p1">我的</p>
</a>
</div>
<div id="app_tab2" class="app-tab" @click="toggleTab('Ordering','imgShow2')">
<a>
<img v-show="imgShow2" class="app-img" src="./assets/ordering.png" /><img v-show="!imgShow2" class="app-img" src="./assets/ordering2.png" /><br /><p>点餐</p>
</a>
</div>
<div id="app_tab3" class="app-tab" @click="toggleTab('Order','imgShow3')">
<a>
<img v-show="imgShow3" class="app-img" src="./assets/order.png" /><img v-show="!imgShow3" class="app-img" src="./assets/order2.png" /><br /><p>订单</p>
</a>
</div>
<div id="app_tab4" class="app-tab" @click="toggleTab('News','imgShow4')">
<a>
<img v-show="imgShow4" class="app-img" src="./assets/news.png" /><img v-show="!imgShow4" class="app-img" src="./assets/news2.png" /><br /><p>资讯</p>
</a>
</div>

</div>

<My class="app-My" :is="currentTab" keep-alive></My>

js部分需要数据变量和方法，用来处理变化情况

data () {
  return {
  //currentTab 用于标识当前触发的子组件
  currentTab: 'My',
  imgShow1:false,
  imgShow2:true,
  imgShow3:true,
  imgShow4:true,
  showApp1:true,
  
  };

 },

methods: {
  toggleTab: function(tab,imgShow) {
   //tab 为当前触发标签页的组件名
   this.currentTab = tab;
    this.imgShow1=true;
    this.imgShow2=true;
    this.imgShow3=true;
    this.imgShow4=true;
    document.getElementById('app_tab1').style.borderTop='solid 1px #cdcdcd'
    document.getElementById('app_tab2').style.borderTop='solid 1px #cdcdcd'
    document.getElementById('app_tab3').style.borderTop='solid 1px #cdcdcd'
    document.getElementById('app_tab4').style.borderTop='solid 1px #cdcdcd'
   if(imgShow=='imgShow1'){
    this.imgShow1=!imgShow;
    document.getElementById('app_tab1').style.borderTop='solid 2px #00bbfe'
   }
   if(imgShow=='imgShow2'){
    this.imgShow2=!imgShow;
    document.getElementById('app_tab2').style.borderTop='solid 2px #00bbfe'
   }
   if(imgShow=='imgShow3'){
    this.imgShow3=!imgShow;
    document.getElementById('app_tab3').style.borderTop='solid 2px #00bbfe'
   }
   if(imgShow=='imgShow4'){
    this.imgShow4=!imgShow;
    document.getElementById('app_tab4').style.borderTop='solid 2px #00bbfe'
   }

  },

最后将标签变化的线条颜色等样式写好

.app-tabs

display: flex
position:absolute
width:100%
height: 10%
bottom:0

.app-tab
width: 25%
margin-left:1px
margin-right:1px
border-top:solid 1px #cdcdcd
  .app-img
  position:relative
  width:30px
  height:30px
  top:1px