Vuejs类绑定和类插值

Question

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

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

lock 和 red 基于状态，颜色的可能取值如下：

• comp--red、comp--yellow、comp--blue 等其他可能的颜色。

迄今为止，我一直在使用基于数据进行类名拼接的计算方法：

getCompClassName(){
  return `comp ${this.isLock ? 'comp--lock' : ''} comp--${this.color}`
}

查看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 来解决这个问题，而不需要列出所有可能性，或者我应该使用计算属性来插入类名？

- a--m

---

计算属性将很好，而且您还可以获得缓存的附加好处，因为计算属性不会在每次重新渲染时重新计算，除非其依赖项发生更改。 - Vamsi Krishna

Answer 1

你为什么不直接使用计算属性呢？

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

JSfiddle: https://jsfiddle.net/5sknyauz/5/

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

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

- Tuqire Hussain

---

无法处理数据。计算示例中的语法也不正确。但方法是正确的。 - dfsq

我正在尝试您的解决方案，但它似乎不是有效的 JavaScript。更多信息可以在此处找到：https://dev59.com/oFwX5IYBdhLWcg3w8TTM#35902149 - a--m

我觉得我根据你的解决方案有了一些东西，这是二进制文件：http://jsbin.com/qajokim/3/edit?css,js,output。为了使其工作，我已经改变了`key`值，像这样`[\`comp--${this.color}\`]`。不确定这个是否有效，但它可以工作。 - a--m

@a--m 是的，抱歉，忘记了方括号。已更新答案并添加了一个 JSFiddle 链接。我相当确定它是完全有效的（至少我一直这样做）。 - Tuqire Hussain