Vue.js

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 标签都引用 class 名称而不是硬编码的背景颜色每个标签。这是我试过的 -
在 <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' 指令需要一个属性值”。如何修改它才能工作？

编辑基于 post 我也尝试了以下方法：

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

但它表现得好像忽略了 class 名字。当用户选择 tab2 时，将显示默认活动颜色，而不是 active 样式中指定的颜色。

Answer 1

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

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

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

Vue.js - conditionally assign a CSS class

javascript

css

vuejs2

vue-native