如何在 Vuejs 中的子组件中包含动态 class 以及条件动态 class

Question

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

<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>

禁用的 class 按我的预期应用，但未应用我通过的 injectedClass。如果我这样做，将应用 injectedClass：

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

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

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

我的问题是如何将我传递的 class 应用到我的组件并有条件地应用我禁用的 class？

Answer 1

只需使用一个array syntax

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

如何在 Vuejs 中的子组件中包含动态 class 以及条件动态 class

How to include a dynamic class as well as a conditional dynamic class to a child component in Vuejs

vue.js

vue-component