javascript - Vuejs 类绑定(bind)和类插值

Question

在 View 中我需要生成以下类:

<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 来解决这个问题，它可以更好地扩展而不必列出所有可能性，或者我应该使用计算方法来插入类名吗？

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
    }
  }
}