三目運(yùn)算是個(gè)好東西急黎。
效果：底部導(dǎo)航，點(diǎn)擊切換圖片侧到，切換字體顏色勃教，刷新不改變。
效果圖
代碼:
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="主頁(yè)">
</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);
}
