Vue.js - 有条件地分配一个 CSS 类

Question

在使用 NativeBase 作为组件库的 VueNative 项目中（因此标签以 nb- 为前缀），我有以下代码。这是在<template> 标签中，是包含导航按钮的footer.vue 文件的一部分。当用户按下它并使其变为活动状态时，此逻辑可以很好地更改选项卡（按钮）的颜色。

<nb-button :active="tab2" :onPress="toggleTab2" :style="{ backgroundColor: (activeTab == 'tab2') ? 'rgb(117, 110, 116)' : 'rgb(82, 74, 81)' }">
  <nb-text class="text">Instructions</nb-text>
</nb-button>

我想用:class 替换:style，所以文件中的所有nb-button 标记都引用类名，而不是每个标记中硬编码的背景颜色。这是我尝试过的 -
在<template> 标签中：

<nb-button :active="tab2" :onPress="toggleTab2" :class="{ (activeTab == 'tab2') ? "active" : "inactive" }">
  <nb-text class="text">Instructions</nb-text>
</nb-button>

在<style> 标签中：

.inactive {
  background-color: rgb(82, 74, 81);
}
.active {
  background-color: rgb(117, 110, 116);
}

但是，在代码编辑器中，:class 行下方会显示一条红色波浪线，上面写着“'v-bind' 指令需要一个属性值”。如何修改它才能工作？

编辑 根据this 的帖子，我还尝试了以下方法：

<nb-button :active="tab2" :onPress="toggleTab2" :style="(activeTab == 'tab2') ? 'active' : 'inactive'">

但它的行为就像它忽略了类名。当用户选择tab2时，会显示默认的活动颜色，而不是active样式中指定的颜色。

Answer 1

您没有转义:class="{ (activeTab == 'tab2') ? "active" : "inactive" }" 中的""，因此应将" 替换为' 并根据this 更改语法：

:class="{ active: (activeTab == 'tab2'), inactive: (activeTab !== 'tab2')}"