Javascript Vuejs类绑定和类插值

在视图中，我需要生成以下类：

<div class="comp comp--lock comp--red">Foo</div>

查看Vuejs文档，我发现有一个

v-bind:class

可以更好地解决这个问题，我的问题是如何解决

color

插值，因为我需要声明所有可能的颜色

data: {
  classObject: {
    'comp--lock': this.isLock,
    'comp--red': this.color === 'red',
    'comp--blue': this.color === 'blue',
    'comp--yellow': this.color === 'yellow'
  }
}

---

有没有什么方法可以解决这个问题，可以使用伸缩性更好的

v-bind:class

，而不必列出所有的可能性，或者我应该使用computed方法插入类名？

您能不能不使用computed

computed: {
  classObject() {
    return {
      'comp--lock': this.isLock,
      [`comp--${this.color}`]: true
    }
  }
}

JSfiddle：

编辑：您实际上可以在数据中执行相同的操作：

data() {
  return {
    classObject: {
      'comp--lock': this.isLock,
      [`comp--${this.color}`]: true
    }
  }
}

---

Computed属性将很好，而且您还可以从缓存中获得额外的好处，因为计算属性不会在每次重新渲染时重新计算，除非它的依赖项无法处理数据。在计算示例中，语法也不正确。但方法是正确的。我正在尝试您的解决方案，但它看起来不像是有效的javascript。更多信息可以是我想我有一些以下您的解决方案，这里是垃圾箱：。为了使它工作，我更改了

键

值，比如

[`comp--${this.color}`]

。不确定这有多有效，但它works@a--是的，抱歉，忘记方括号了。更新了答案并添加了一个JSFIDLE链接。我很确定这是完全正确的（至少我一直都这么做）。

data() {
  return {
    classObject: {
      'comp--lock': this.isLock,
      [`comp--${this.color}`]: true
    }
  }
}