在Vuejs中包含“活动”类时如何切换图标答案

【问题标题】：How to switch icon when containing class 'active' in Vuejs在Vuejs中包含“活动”类时如何切换图标
【发布时间】：2021-09-28 13:02:23
【问题描述】：

我有一个带有图标的底部导航栏。当路由器链接具有“活动”类时，它怎么会变成活动图标？默认图标 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>

【问题讨论】：

不清楚你在问什么。
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript html vue.js routerlink routerlinkactive

【解决方案1】：

解决办法：

绑定 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://vuejs.org/v2/guide/class-and-style.html

【讨论】：