Vue组件中基于条件动态绑定CSS类的实现疑问

你遇到的问题核心在于Vue的class对象语法中，直接写变量名作为键名时，会被解析成字符串字面量，而不是你定义的classProp属性值。也就是说你当前的代码里，Vue会尝试添加一个名为"classProp"的类，而不是classProp变量对应的字符串值（比如默认的bg-alert）。

修正方案：使用方括号包裹动态键名 #

在Vue的对象语法中，如果要使用变量作为类名的键，需要用方括号[]把变量名包起来，这样Vue才会把它解析为变量，而不是固定字符串。修正后的代码如下：

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

<script>
export default {
  props: {
    classProp: {
      type: String,
      default: 'bg-alert'
    },
    booleanProp: {
      type: Boolean,
      default: false
    }
  }
}
</script>

额外说明 #

• 这里把v-bind:class简化成了:class，这是Vue的语法糖，功能完全一致，代码更简洁。
• 当booleanProp为true时，组件的<span>会添加classProp指定的类名；为false时则不会添加。
• 如果需要同时绑定多个动态类或者静态类，可以把静态类放在数组里，比如： :class="['static-class', { [classProp]: booleanProp }]"

内容的提问来源于stack exchange，提问作者stack001 stack001