如何在 Vuejs 中的子组件中包含动态类和条件动态类答案

【问题标题】：How to include a dynamic class as well as a conditional dynamic class to a child component in Vuejs如何在 Vuejs 中的子组件中包含动态类和条件动态类
【发布时间】：2021-07-21 05:31:13
【问题描述】：

我有一个GenericButton 组件，我需要将几个道具传递给它。一个用于它将使用的类，另一个是在禁用按钮时将应用的类。我在这里阅读了 Vue 文档：https://vuejs.org/v2/guide/class-and-style.html，但我仍然遇到问题。在文档中，他们说您可以这样做将一个类绑定到一个 JS 表达式，甚至绑定多个类。

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

我传递了一个名为 injectedClass 的道具和一个名为 isDisabled 的道具。这是我的按钮：

<button
    :disabled="isDisabled"
    :class="{ injectedClass, disabled: isDisabled }"
    @click.stop="handleClick"
  >
    {{ text }}
  </button>

disabled 类应用了我的预期，但我传递的injectedClass 没有应用。如果我这样做，则应用 injectedClass：

<button
    :disabled="isDisabled"
    :class="injectedClass"
    @click.stop="handleClick"
  >
    {{ text }}
  </button>

如果我这样做，它甚至不起作用：

:class="(injectedClass, { disabled: isDisabled })"

我的问题是如何将我通过的类应用到我的组件并有条件地应用我的禁用类？

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

只需使用array syntax

:class="[injectedClass, { disabled: isDisabled }]"

【讨论】：

谢谢！我很困惑，因为当我尝试将其保存为 :class="injectedClass, {disabled: isDisabled}" 时，它会用括号而不是括号自动完成。无论如何，谢谢你的帮助！