vue 底部导航demo

三目运算是个好东西。

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

效果图

代码:
html

    

      

        
          

            
          
          

            {{item.text}}
          
        
      
    
    
  

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);
}