javascript - 在条件变量中渲染 css 类

Question

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

1. 应设置的类名的字符串属性
2. bool 属性，用于解析是否添加此类

我的组件如下所示:

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

当我使用此组件时，如您在以下代码中看到的那样，span 元素具有类 classProp 而不是 bg-success

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

所需输出:

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

给定输出:

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

感谢您的回答。

Answer 1

Vue 的 object syntax for class将使用 classProp 作为类名(与 JavaScript 对于对象键的做法相同)，而不是计算它。为此你必须使用 ES6 的 computed property name语法:

<template>
      <span v-bind:class="{ [classProp] : booleanProp}"></span>
</template>

此外，当使用 v-bind (或简写 :)时，不要忘记像在 JavaScript 中那样传递字符串，用引号引起来(或者，您可以省略绑定(bind)并将其作为常规 Prop 传递 classProp="bg-success"):

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

JSFiddle (不要介意烤肉串 Prop )