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' 指令需要一個屬性值”。 如何修改它才能工作？

編輯基於這篇文章，我還嘗試了以下方法：

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

但它的行為就像它忽略了類名。 當用戶選擇 tab2 時，會顯示默認的活動顏色，而不是active樣式中指定的顏色。

Answer 1

你沒有逃避""里面:class="{ (activeTab == 'tab2') ? "active" : "inactive" }"所以應該用'替換"並根據這個改變語法：

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