0

在使用 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>

我想替换为文件中:style的:class所有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样式中指定的颜色。

4

1 回答 1

3

您没有逃避""内部:class="{ (activeTab == 'tab2') ? "active" : "inactive" }"，因此应替换"为'并基于此更改语法：

:class="{ active: (activeTab == 'tab2'), inactive: (activeTab !== 'tab2')}"
于 2020-03-22T21:57:10.450 回答