vue 移动端底部菜单，选中图片动态切换

一、当数据较少，不使用循环场景

<div class="tabStyle">
      <div
        class="tabLeft"
        :class="{ active: typeECharts === 'cost_items' }"
        @click="selectCDM('cost_items')"
      >
        费用项目
      </div>
      <div
        class="tabContent"
        :class="{ active: typeECharts === 'merchants_code' }"
        @click="selectCDM('merchants_code')"
      >
        供应商
      </div>
      <div
        class="tabRight"
        :class="{ active: typeECharts === 'dept_id' }"
        @click="selectCDM('dept_id')"
      >
        部门
      </div>
</div>

data() {
    return {
      typeECharts :'cost_items',
      
  }
},

 修改对应显示name名称，修改数据

  selectCDM(type) {
      console.log('type', type)
      this.typeECharts = type 

      if (type == 'cost_items') {
        this.SumZong = '费用总额'
      } else if (type == 'merchants_code') {
        this.SumZong = '供应商总额'
      } else {
        this.SumZong = '部门总额'
   }

二、循环动态显示底部菜单

 

页面结构如下：

data中定义一个showImg，用来控制图片、文字选中时的样式

 <!-- 底部 -->
    <div class="footer">
      <div
        class="nameT"
        v-for="(item,index) in navs"
        :key="item.id"
        @click="goMenu(index,item)"
      >
        <img :src="showImg == item.title?item.imgUrl:item.imgUrl1" alt="" />
        <p class="titleT" :class="{active:showImg == item.title}">{{ item.title }}</p>
      </div> 
  </div>

 data() {
    return {
      showImg:'我的',
      navs: [
        { id: 1, title: "首页", imgUrl: require("../assets/img/shouye.png"),imgUrl1: require("../assets/img/sye.svg"),path:'/index/home'},
        { id: 2, title: "我的", imgUrl: require("../assets/img/mine.svg") ,imgUrl1: require("../assets/img/noMine.png"),path:'/index/personal'},
      ],
    };
  },

 设置选中菜单之后跳转

 watch: {
    $route() {
      this.showImg = this.$route.name;
    },
  },
  mounted() {
    this.showImg = this.$route.name;
  },
  methods: {
    goMenu(item) {
      // this.showImg = item.title;
      this.showImg = this.$route.name;
      switch (item.title) {
        case "首页":
          this.$router.push("/index/home");
          break;

        case "我的":
          this.$router.push("/index/personal");
          break;
      }

      // this.$router.push({
      //   path:item.path
      // })
    },
  },

css样式如下： 

<style scoped lang="less">
 
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0rem;
    height: 1.5rem;
    width: 100%;
    background: #fff; 
    .active{
      color: #5C93F9;
    }
    .nameT {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      padding: 0 0.8rem;
      font-size: 0.3rem;
      .titleT {
        margin-top: 0.1rem;
      }
      img {
        width: 0.5rem;
        height: 0.5rem;
      }
    }
  }
   
 
</style>

===================================================================

*格外增加一个注意点：

情景如下，当我选中的是‘我的’菜单，然后刷新页面时，菜单选中高亮的会变到第一个‘首 页’菜单下，为了解决这个问题，我们用showImg控制菜单调整的时候，需要将其于路由绑定在一起，详情请参考如下链接vue导航栏（选中状态刷新不消失）_王永存-CSDN博客