[英]How to switch icon when containing class 'active' in Vuejs
我有一個帶有圖標的底部導航欄。 當路由器鏈接具有“活動”類時,它怎么會變成活動圖標? 默認圖標 1 處於活動狀態。
<li>
<router-link v-if="active" :class="{active}" active-class="active">
Icon 1 active
</router-link>
<router-link v-if="!active" :class="{active}" active-class="active">
Icon 1
</router-link>
</li>
<li>
<router-link v-if="active" :class="{active}" active-class="active">
Icon 2 active
</router-link>
<router-link v-if="!active" :class="{active}" active-class="active">
Icon 2
</router-link>
</li>
<li>
<router-link v-if="active" :class="{active}" active-class="active">
Icon 3 active
</router-link>
<router-link v-if="!active" :class="{active}" active-class="active">
Icon 3
</router-link>
</li>
解決方案:
綁定 HTML 類:
<li>
<router-link @click="isActive1 = true" :class="{ active: isActive1 }">
Icon 1
</router-link>
</li>
<li>
<router-link @click="isActive2 = true" :class="{ active: isActive2 }">
Icon 2
</router-link>
</li>
<li>
<router-link @click="isActive3 = true" :class="{ active: isActive3 }">
Icon 3 Active
</router-link>
</li>
實現isActive變量:
data: {
isActive1: true, // default icon1
isActive2: false,
isActive3: false,
}
並實現觀察者:
watch: {
isActive1(val) {
if(val === true) {
this.isActive2 = false
this.isActive3 = false
}
},
isActive2(val) {
if(val === true) {
this.isActive1 = false
this.isActive3 = false
}
},
isActive3(val) {
if(val === true) {
this.isActive1 = false
this.isActive2 = false
}
}
}
文檔: https ://v2.vuejs.org/v2/guide/class-and-style.html
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.