在@单击不同的组件后，Vue.JS @单击活动样式处于停用状态

<template>
  <div>
    <div @click="toggleActive" v-if="isActive" class="active">组件</div>
    <div @click="toggleActive" v-else class="inactive">组件</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
}
</script>

<style>
.active {
  // 活动样式
}

.inactive {
  // 非活动样式
}
</style>

<template>
  <div>
    <div @click="toggleActive" :class="isActive ? 'active' : 'inactive'">组件</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
}
</script>

<style>
.active {
  // 活动样式
}

.inactive {
  // 非活动样式
}
</style>