Javascript 在条件中呈现变量中的css类

我正在尝试创建组件，我将在其中设置2个属性：

应设置的类名的字符串属性

用于解析是否添加此类的布尔属性

我的组件如下所示：

<template>
      <span v-bind:class="{ classProp : booleanProp}"></span>
</template>
<script>
    export default {
      props: {
        classProp: {
          type: String,
          default: 'bg-alert'
        },
        booleanProp: {
          type: Boolean,
          default: false
      }
    }
</script>

导出默认值{
道具：{
classProp：{
类型：字符串，
默认值：“bg警报”
},
booleanProp：{
类型：布尔型，
默认值：false
}
}

当我使用这个组件时，正如您在下面的代码中所看到的，span元素具有classclassProp，而不是bg success

<my-component :booleanProp="true" :classProp="bg-success"></my-component>

所需输出：

<span class="bg-success"></span>

给定输出：

<span class="classProp"></span>

感谢您的回答。

Vue将使用

classProp

作为类名（与对象键的do-it JavaScript相同），而不是计算它。为此，您必须使用ES6的语法：

另外，当使用

v-bind

（或缩写为

：

）时，不要忘记像在JavaScript中一样传递字符串，并用引号括起来（或者，您可以省略绑定，而将其作为常规属性传递

classProp=“bg success”

）：

（不要介意烤肉串案例道具）

Vue将使用

classProp

作为类名（与对象键的do-it JavaScript相同），而不是计算它。为此，您必须使用ES6语法：

另外，当使用

v-bind

（或缩写为

：

）时，不要忘记像在JavaScript中一样传递字符串，并用引号括起来（或者，您可以省略绑定，而将其作为常规属性传递

classProp=“bg success”

）：

（不要介意烤肉串的道具）