若要更改选项卡处于活动状态并被单击时的文本颜色，可以组合使用：class指令和计算属性。
下面是一个示例，说明如何执行此操作：

<template>
  <div>
    <div
      @click="visibleComponent = 'transactions'"
      :class="{ active: visibleComponent === 'transactions' }"
      class="font-weight-400 font-size-16 line-height-24 white"
    >
      Wallet Transactions
    </div>
    <div
      @click="visibleComponent = 'bankAccount'"
      :class="{ active: visibleComponent === 'bankAccount' }"
      class="opacity-25 padding-left-20 font-weight-400 font-size-16 line-height-24 blue"
    >
      Bank Account
    </div>
  </div>
</template>

<style>
.active {
  color: red;
}
</style>

<script>
export default {
  data() {
    return {
      visibleComponent: 'transactions'
    }
  }
}
</script>

在本例中，当visibleComponent数据属性等于正在单击的选项卡时，将active类添加到div元素中。active类在样式表中定义，并将文本颜色更改为红色。
您可以自定义此方法以满足您的特定需要。例如，您可能希望使用不同的类名或根据不同的条件更改颜色。

类绑定中的使用条件

:class="{ visibleComponent === 'transactions' : 'bg-blue'}"

如果visibleComponent === 'transactions'返回true，则此选项卡将获得bg-blue类。如果要在其处于活动状态时将其类设置为其他选项卡，请在其上使用:class="{ visibleComponent === 'bankAccount' : 'bg-blue'}"