将模板字符串作为对象属性名称？

最近在做一个项目的时候发现以下的代码是存在问题的：

    <button
        class="vl-button"
        :class="{
            `vk-button--${type}`: type,
            `vk-button--${size}`: size,
            'is-plain': plain,
            'is-round': round,
            'is-circle': circle,
            'is-disabled': disabled,
        }"
        :disabled="disabled"
    >

经过查阅资料发现模板字符串是不能直接作为属性名的，应该在模板字符串外面加一个[]表示计算值。“计算的属性名称”中允许使用模板字符串。

    <button
        class="vl-button"
        :class="{
            [`vk-button--${type}`]: type,
            [`vk-button--${size}`]: size,
            'is-plain': plain,
            'is-round': round,
            'is-circle': circle,
            'is-disabled': disabled,
        }"
        :disabled="disabled"
    >

为什么不允许模板字符串作为文字对象键？

在 JavaScript 中，对象字面量的键名必须是静态的，不能使用动态的或计算的键名。这是因为对象字面量在代码解析阶段就会被解析，而模板字符串是在运行时才会被解析，所以无法在对象字面量中使用模板字符串作为键名。

如果需要动态生成对象的键名，可以使用计算属性名的方式来实现，即在对象字面量中使用方括号 [] 来包裹键名的表达式，这样就可以动态生成对象的键名。