如何在Vuejs中包含class 'active'时切换图标

Question

我有一个带图标的底部导航栏。 router-link有class'active'怎么会变成活动图标呢？默认图标 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>

Answer 1

解决方法：

绑定 HTML class:

  <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,
 }

并实施 watchers:

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

如何在Vuejs中包含class 'active'时切换图标

How to switch icon when containing class 'active' in Vuejs

html

javascript

vue.js

routerlinkactive

routerlink