Vue动态class为什么v-bind:class的第二个class需要加引号

# 问题

问题是关于vue.js框架中动态class绑定的带‘-’的类名为什么要加引号

下面是中文官网给出的示例代码，英文官网也是相同的（我加了test内容，方便debug）

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

1
2
3

我的问题就是为什么了第2个class是有引号的。

如果我去了引号，下面的就不能生效

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

1
2
3

因为 { } 内的代码是要拿去当js解析的，js中变量是没有用 ' - '号连接

就像 css中 font-size 是用 - 号连接

到了js中就必须用驼峰的写法

此处，v-bind后面的值为表达式，表达式写法和JS基本一样，但是所有的this都被省略。

JS里面，键名如果有-符号，也是需要加引号。JS中

{
    active: isActive,
    text-danger: hasError
}

1
2
3
4

是无效的，而

{
    'active': isActive,
    'text-danger': hasError
}

1
2
3
4

是有效的