vue 底部导航demo

三目运算是个好东西。

效果：底部导航，点击切换图片，切换字体颜色，刷新不改变。

效果图

代码:
html

<div class="box">
    <div class="box-div">
      <div class="box-border" v-for="(item,index) in route" :key="index" @click="go(index)">
        <router-link :to="item.path">
          <div class="box-border-img">
            <img class="img-50-50" :src="item.path===$route.path?item.active:item.img" alt="主页">
          </div>
          <div class="box-border-title">
            <span :class="item.path===$route.path?font_sizeA:font_sizeB">{{item.text}}</span>
          </div>
        </router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>

js

data() {
    return {
      font_sizeA:"font_sizeA",
      font_sizeB:"font_sizeB",
      route: [
        {text: "A",path: "/",img: require("@/assets/images/icon/tabbar_home_default.png"),active: require("@/assets/images/icon/tabbar_home_selected.png")},
        {text: "B",path: "/service",img: require("@/assets/images/icon/tabbar_order_default.png"),active: require("@/assets/images/icon/tabbar_order_selected.png")},
        {text: "C",path: "/customer",img: require("@/assets/images/icon/tabbar_customer_default.png"),active: require("@/assets/images/icon/tabbar_customer_selected.png")},
        {text: "D",path: "/healthy",img: require("@/assets/images/icon/healthyNone.png"),active: require("@/assets/images/icon/healthyYeas.png")},
        {text: "E",path: "/my",img: require("@/assets/images/icon/tabbar_mine_default.png"),active: require("@/assets/images/icon/tabbar_mine_selected.png")}
      ]
    };
  },

css

.font_sizeA {
    font-size: 24px;
    font-family: PingFang-SC-Regular;
    color: #1cb8ce;
}
.font_sizeB {
    font-size: 24px;
    font-family: PingFang-SC-Regular;
    color: rgb(102, 102, 102);
}